Ограничение символов в текстовом поле, как учитывать возврат каретки?

Question

Я хотел бы ограничить пользователя вводом 10 символов в текстовую область и уведомлять пользователя о приближении к лимиту. Я делаю это, установив атрибут maxLength текстовой области и используя некоторый javascript для обновления метки по мере ввода символов.

Но мой javascript неправильно подсчитывает новые строки. Или, по крайней мере, они не учитывают их так же, как элемент textarea. Если я войду в приведенный ниже пример ввода, мой javascript будет вычислять, что 6 символов используются и выводят, что осталось 4 символа, но textarea не позволит больше вводить данные.

вход

Пример: введите 'D', нажмите кнопку возврата в 4 раза, введите 'D':

D 



D 

(я на самом деле позволяет более чем 10, но низкое число лучше иллюстрирует вопросы)

function limitText() { 
 
    var textarea = document.getElementById('textarea'); 
 
    var char_label = document.getElementById('charcount_text'); 
 

 
    var count = textarea.value.length; 
 
    var max = textarea.maxLength; 
 
    console.log(count + " " + max); 
 
    var remaining = max - count; 
 
    if (remaining <= 0) { 
 
    char_label.innerHTML = '10 character limit reached.'; 
 
    } else if (remaining <= 5) { 
 
    char_label.innerHTML = '10 character limit, ' + remaining + ' remaining.'; 
 
    } else { 
 
    char_label.innerHTML = ''; 
 
    } 
 
}

textarea { 
 
    width:200px; 
 
    height:80px; 
 
}

<textarea id="textarea" onKeyDown="limitText()" onKeyUp="limitText()" maxlength="10"></textarea> 
 
<span class="charcount_text" name="charcount_text" id="charcount_text"></span>

Answer 1

Хорошо, так вопрос разрывы строк, как указано в комментарии.

Код не очень красивый, но я получил его до такой степени, что он будет показывать разницу в вашем счете и фактическом подсчете. То, что вам нужно сделать с этого момента, объясняет эту разницу при вычислении остатка. Если это неясный комментарий ниже, и я постараюсь помочь.

Вот скрипка с разрывами линий подсчета. Fiddle

КОД:

<textarea id="textarea" onkeyup="limitText()" maxlength="10"></textarea> 
<span class="charcount_text" name="charcount_text" id="charcount_text"> </span> 
</br> 
<span class="showall" name="showall" id="showall"></span> 
    <script type='text/javascript'> 
    function limitText() { 

    var textarea= document.getElementById('textarea'); 
    var char_label = document.getElementById('charcount_text'); 

    var textinside = document.getElementById('showall'); 

    var count = textarea.value.length; 
    var max = textarea.maxLength; 
    console.log(count + " " + max); 
    var remaining = max - count; 
    if(remaining <= 0) { 
    char_label.innerHTML = '10 character limit reached.' ; 
    } else if(remaining <= 5) { 
    char_label.innerHTML = '10 character limit, ' + remaining + ' remaining.'; 
    } else { 
    char_label.innerHTML = count;   
    } 
    var enteredText = textarea.value; 
    numberOfLineBreaks = (enteredText.match(/\n/g)||[]).length; 
    var characterCount = enteredText.length + numberOfLineBreaks; 
    textinside.innerHTML = characterCount; 
} 
</script>