JSFiddle - React, Tailwind, and code Playground

by slo_nik

HTML

<form action="#">
	<textarea name="limitChars" id="limitInput" cols="30" rows="10"></textarea>
	</form>
	<div id="typeChars"></div>

JavaScript

function changeAddress(myObject, typeChars){
    	  var address;
        $(myObject).bind('input propertykeypress', function(){
        	address = $(this).val()
            var pattern = /^(([https:\/\/]?)*?)[-?\w\/.=&;]*?$/;

            var result = new RegExp(pattern);
            
            if(!result.exec(address)){
               limitChars(myObject, typeChars)
            }
            else{
                return true
            }
        })
    }

    // Функция подсчета количества символов - START
    var amount = 0;
    function limitChars(myObject, typeChars){
        $(myObject).bind('input propertykeypress', function(){
            var count = $(this).val().trim().length; // кол-во уже введенных символов
            amount = 30;
            var sum_count = Math.round(count*120/1000);
            if (sum_count > amount) {
                amount = sum_count;
            }

            $(typeChars).text('Символов: ' + count + '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Стоимость проверки: ' + amount + ' рублей');
        });
    }
    // Функция подсчета количества символов - END
    
    $(document).ready(function(){
        var count = 0;
        var myObject = '#limitInput'; // объект, у которого считаем символы
        var typeChars = '#typeChars'; // куда выводим кол-во введенных символов

        changeAddress(myObject, typeChars)

       $(typeChars).text('Символов: ' + count + '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0Стоимость проверки: ' + amount + ' рублей');

    });