三星手机键盘用 onkeyup 监听器复制字母

Question

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

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

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

我做了一些测试，结果如下：
测试 1：
三星键盘 + 越南语
Chrome / 或三星浏览器
-> 问题发生

测试 2：
三星键盘+英文
Chrome / 或三星浏览器
-> 问题没有发生

测试 3：
三星键盘 + 越南语
火狐浏览器
-> 问题没有发生

测试 4：
Google 键盘 + 越南语
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 {
  text-transform: uppercase;
}

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

Answer 2

好的，我已经找到如何通过应用中描述的 "password field" 技巧来解决这个问题。

Answer 3

我发现自动大写为我解决了问题：

<input id="input" type="search" autocomplete="off" autocorrect="off" autocapitalize="characters" spellcheck="false" placeholder="Enter Text"/>

这实际上打开了键盘的大写锁定。占位符文本保持原样（大写和小写），大写不像 CSS 文本转换方法那样 "trick of the eye"，并且比密码字段 hack 简单得多。

三星手机键盘用 onkeyup 监听器复制字母

Samsung mobile keyboard duplicates letters with onkeyup listener

javascript

react-native

samsung-mobile

keyup