三星移动键盘使用 onkeyup 侦听器复制字母

Question

我正在编写一个简单的代码，将键入的字母转换为大写，然后在 keyup() 事件上将此大写字母重新填充为输入元素。

但是我遇到了一个令人困惑的问题：在我的三星手机（Galaxy Note 5）上输入字母时，我收到重复的字母，如下图所示：

以上，我使用默认的三星键盘越南语和谷歌浏览器。但是当我尝试将语言切换为英语时，我没有看到问题。

我进行了一些测试，结果如下：

测试 1：

三星键盘 + 越南语

Chrome / 或三星浏览器

-> 问题发生

测试 2：

三星键盘 + 英文

Chrome / 或三星浏览器

-> 问题不会发生

测试 3：

三星键盘 + 越南语

Firefox 浏览器

-> 该问题不会发生

测试 4：

谷歌键盘 + 越南语

Chrome / 或三星浏览器

-> 问题不会发生

这是代码：

<input type="text" id="inputText">

<script>

  document.getElementById('inputText').addEventListener('keyup', function() {

    var typedLetters = this.value;

    var upperCasedLetters = typedLetters.toUpperCase();

    this.value = upperCasedLetters;

  });

</script>

我在 GitHub 上阅读了一个类似的问题：https : //github.com/facebook/react-native/issues/11068，但直到现在我还没有找到明确的解决方案。

有人可以告诉我这是怎么回事吗？以及如何以编程方式解决此问题？

Answer 1

为什么不使用text-transform: uppercase;？？纯 CSS 解决方案。input {&nbsp; text-transform: uppercase;}<input type="text" id="inputText">

Answer 2

我发现 autocapitalize 为我解决了这个问题：<input&nbsp;id="input"&nbsp;type="search"&nbsp;autocomplete="off"&nbsp;autocorrect="off"&nbsp;autocapitalize="characters"&nbsp;spellcheck="false"&nbsp;placeholder="Enter&nbsp;Text"/>这基本上打开了键盘的大写锁定。占位符文本保持原样（大写和更低），大写不是像 CSS 文本转换方法那样的“眼花缭乱”，并且比密码字段黑客简单得多。