Question

请参见下面的代码：

document.getElementById("FirstName").addEventListener("keydown", alphaOnly, false);
document.getElementById("Surname").addEventListener("keydown", alphaOnly, false);

function alphaOnly(event) {
        event.preventDefault();
    }

它可以在使用Chrome的本地PC上运行； IE; Edge和Firefox，即用户无法在两个字段中输入字符。

但是，当我使用Android（使用Chrome或Samsung Internet浏览器）浏览时，则可以输入这些字段。为什么会这样？

我用Google搜索并遇到了这个问题：AddEventListener works on the browser but does not on Android，但是没有公认的答案。

如果有任何不同，我有Android 5.0 API 21。如果我使用兼容的Javascript，会有所不同吗？

更新

我刚刚遇到了这个问题：https://forums.expo.io/t/linking-addeventlistener-url-never-fires-in-android/7442。可能是因为我有API 21（请参阅GitHub链接）。

Answer 1

这是因为您的Android没有连接 real 键盘，它具有 virtual ，并且不会触发 key-事件。 / p>

由于您正在使用<input>，因此请监听input事件，而不是keydown或keyup。它可以解决您的问题，还有助于处理paste。

document.getElementById("FirstName").addEventListener("input", alphaOnly, false);
document.getElementById("Surname").addEventListener("input", alphaOnly, false);


function alphaOnly(event) {
  event.target.value = event.target.value.replace(/[^a-z]/ig, '');
}

<input id="FirstName"><br>
<input id="Surname">

Answer 2

如果您的目标是阻止用户输入，则最佳选择是“禁用”属性（<input disabled/>）。在JavaScript中，您可以如下进行更改：

document.getElementById('FirstName').disabled = true;

如果您要验证输入并仅接受某些字符：

document.getElementById('FirstName').addEventListener('keyup', function(event) {
  var rgxp = /[^a-z]/g;

  if (rgxp.test(this.value)) {
    // This keeps previous value
    this.value = this.value.replace(rgxp, '');

    // If you do not want to keep old value, use the following:
    // this.value = '';
  }
});

<input id="FirstName" />

在Android上浏览时，addeventlistener无法正常工作吗？

2 个答案: