Различные MaxLength проверка текстового поля с символами новой строки в Chrome и Firefox

Question

Проблема в том, что Firefox считает строку как «1» (\ п) символов в то время как хром считать их «2» (\ г \ п) Эта это то, что я получаю в textarea с maxlength=10:

Это являются charcters для Firefox

1234 
5 
6 
7 

это повторно charcters для Chrome

1234 
5 
6 

Проблема возникает при попытке проверить форму. Если у меня есть, например, следующий текст

678 

В Firefox проверка прошла успешно и данные сохраняются, но когда я пытаюсь сделать то же самое в Chrome это показывает предупреждение, и предотвращает его от отправки форма. «Пожалуйста, сократите этот текст до 10 символов или меньше (в настоящее время вы используете 11 символов)».

Я думаю, что это валидация сообщения новые в Chrome или, по крайней мере, я не видел их перед

Вот JSFiddle example. Чтобы воспроизвести его в Chrome, вы должны написать строку с 10 символами, а затем удалить 1 и нажать Enter, чтобы добавить новую строку.

Вот пример того, как JavaScript подсчитывает JSFiddle length count with js.

Не знаете, какое значение является правильным для новой строки (1 или 2). Но так как база данных (Postgres в моем случае) и JavaScript считают ее «1» символом, я хотел бы знать, есть ли способ сделать Chrome сделать то же самое.

Answer 1

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

Поймать немного Я нашел этот плагин jQuery Max Length, который отлично работает, просто добавив несколько строк. Доступно по лицензии MIT. И подсчитывает символы новой строки, как и должно быть (2 символа)

У него есть некоторые параметры для установки максимальной длины, текста обратной связи, изменения фона при заполнении, между другими. На сайте есть очень хорошая документация и множество примеров.

Это очень настраиваемый, например, здесь это мое

Это единственный код, который я использовал плюс некоторые CSS.

<script type="text/javascript" src="jquery.plugin.js"></script> 
<script type="text/javascript" src="jquery.maxlength.js"></script> 
<script> 
    $(function() { 
     $('.t_tresc').maxlength({ 
      showFeedback: true, 
      feedbackText: '{c}/{m} max.', 
      overflowText: '{c}/{m} max!', 
      feedbackTarget: '#targetFeedback$name', 
      max: $max_length, 
      truncate: false, 
      onFull: null 
     }); 
    }); 
</script>