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      ?

由于这种易变性，我建议使用简单的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

textarea上的Maxlength属性不适用于移动设备

1 个答案: