Атрибут Maxlength на текстовом поле не работает на мобильном телефоне

Question

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

Я хочу ограничить текст в текстовой области до 300 в случае мобильного телефона для моего отзывчивого веб-сайта.

Я использую браузеры Chrome и Firefox на мобильном

Answer 1

Атрибут maxlength не является полностью стабильным на мобильных браузерах. Просто глядя на документации MDN для этого атрибута, мы находим это

Feature  Android Firefox Mobile (Gecko) IE Mobile Opera Mobile 
maxlength  ?   4.0(2.0)   No Support  ? 

Из-за этого volability, я бы рекомендовал использовать простой JavaScript. Что-то вроде этого

var textField = document.getElementById("text-field"); 
 
var charCount = document.getElementById("char-count"); 
 

 
textField.addEventListener("keydown", function(event) { 
 
    if (this.value.length === 299 && event.keyCode != 8) { 
 
     event.preventDefault(); 
 
     return false; 
 
    } 
 
    var length = event.keyCode != 8 ? this.value.length + 1 : this.value.length - 1; 
 
    charCount.innerHTML = (length) + "/" + "300"; 
 
    charCount.style.color = length >= 270 ? "red" : "black"; 
 
});

<textarea id="text-field" rows="6" cols="30"></textarea> 
 

 
<p id="char-count"></p>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea