如何防止用户输入显示在移动浏览器的输入字段中

Question

我希望用户输入他的名字，但我想将字符数限制在 15 个以内，在桌面浏览器中它可以工作。

document.querySelector('#input-name').addEventListener('keydown', function (e) {

const maxLetters = 15

document.querySelector('#input-name').addEventListener('keyup', function (e) {
    userName = e.target.value
    document.querySelector('#labelInputName').textContent = userName.length + "/" + maxLetters

})

userName = e.target.value

if (userName.length >= maxLetters && e.keyCode != 46 && e.keyCode != 8) {
    e.preventDefault();
}

else if (e.keyCode != 46 && e.keyCode != 8) {
    document.querySelector('#labelInputName').textContent = userName.length + 1 + "/" + maxLetters
}

})

所以在桌面浏览器中，当我达到 15/15 时，它可以在键盘上按除 Delete 和 BackSpace 之外的任何键后它可以工作（甚至不会在输入字段中显示 16 个字符）。 ..

但是在移动浏览器中，我达到了 15/15 而不是继续保持 16/15.... 我该如何解决？

Answer 1

到目前为止，最跨浏览器的方法是使用 input 元素的 maxlength attribute；不需要 JavaScript：

<input id="input-name" maxlength="15">

实例：

<input id="input-name" maxlength="15">

maxlength 基本上永远是 HTML 的一部分（它在 1993 年的 HTML+ spec 中），我希望浏览器对它的支持是普遍的。

如果您需要设置 JavaScript 的最大长度，您可以使用 maxLength 属性:

document.getElementById("input-name").maxLength = 15;

实例：

document.getElementById("input-name").maxLength = 15;

<input id="input-name">

Answer 2

长期支持的maxlength属性怎么样？ https://www.w3schools.com/tags/att_input_maxlength.asp

如何防止用户输入显示在移动浏览器的输入字段中

How can I prevent user Input to be shown on input filed in mobile browser

javascript

events

mobile

keydown

preventdefault