在 iPadOS 14 Safari 上触发按键事件时设置输入值不正确

Question

在html中使用以下代码：

<input id="test" autocomplete="off" inputmode="numeric"/>
<script>
var input = document.getElementById('test');
input.addEventListener('keydown', function(e){
     input.value = 34;
})
</script>

环境
iPadOS14 + Safari + 日语键盘

步骤：
1.专注于输入打开键盘
2.切换到日语键盘
3. 按任意数字按钮，如 2、3 等
4.观察到输入值为342或343而不是34.

预期： 输入值应为 34。

已知解决方法:
使用 setTimeout 在按下时更新输入值。

setTimeout(() => {
    input.value = 34;
}, 20)

我的问题是有没有更好的办法来解决这个问题？

Answer 1

所描述的问题与日文键盘无关 - 您可以使用英文键盘演示相同的问题。

这与事件的顺序有关。在按下键时，您会看到该事件，但当时 input.value 尚未被系统更新。因此，当您将 34 写入该值时，随后系统会看到一个 keyup，然后将密钥写入该值 - 连接到任何已经存在的值。

所以，如果你监听 keyup 你会得到你想要的结果，系统会将按下的键代码放入 input.value，然后你将用 34 覆盖它。

var input = document.getElementById('test');input.addEventListener('keyup', function(e){
     input.value = 34;
})

<input id="test" autocomplete="off" inputmode="numeric"/>

在 iPadOS 14 Safari 上触发按键事件时设置输入值不正确

Setting input value when keydown event triggered is incorrect on iPadOS 14 Safari

javascript

safari

cjk

ipados