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

【问题标题】：How can I prevent user Input to be shown on input filed in mobile browser如何防止用户输入显示在移动浏览器的输入字段上
【发布时间】：2019-09-07 12:50:27
【问题描述】：

我希望用户输入他的姓名，但我想将字符数限制为 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 日...... 我该如何解决？

【问题讨论】：

标签： javascript events mobile keydown preventdefault

【解决方案1】：

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

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

现场示例：

&lt;input id="input-name" maxlength="15"&gt;

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

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

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

现场示例：

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

&lt;input id="input-name"&gt;

【讨论】：

它可以工作，但是当我为 keydown 和 keyup 添加“addEventListener”时，它会停止对移动设备的限制，知道为什么吗？
@EddieKnaz - 为这些事件添加事件处理程序本身不会破坏长度限制。但是您的代码可以分配一个打破限制的值。所以我猜你的代码是分配给input 的value 并使用比限制更长的字符串。为避免这种情况，请确保在分配时遵守限制：input.value = theString.substring(0, input.maxLength);。

【解决方案2】：

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

【讨论】：