javascript - 当我在数字类型 v-text-field 上输入 cjk(韩语) 时，Event.preventDefault 不起作用

Question

我正在开发一个 vue 项目，这是一个小错误的修复。但这让我很难受。

我制作了 v-text-field 仅输入数字，看起来效果很好。

<v-text-field type="number">

我只想输入数字，因此我使用 keydown 事件来使用 PreventDefault。

<v-text-field type="number" @keydown="testKeydown">

testKeydown(event) {
  if(event.key !== "1" && ... && event.key !== "Delete" && event.key !== "Backspace") {
    console.log("Wrong Input!!!");
    event.preventDefault();
  }
}

此代码可以防止输入指数值'e'、'E'和'+'、'.'。

但它不能阻止韩语(也许是中日韩)，例如“ㅁ”。 (当我输入韩语时，event.key 返回“进程”)和“输入错误!!!”已记录我的 Chrome 控制台。

此外，屏幕上显示的 v-text-field 的值为“123ㅁ”，但通过 console.log(event) 获取的 event.target.value 的值为“”。

我想阻止输入韩语字符(或 CJK)，或者立即删除它们，即使输入时没有删除“type="number”'。

我能为它做什么？

Answer 1

这称为组合，在某些输入法上，当您需要在组合单个字符之前输入多个笔画时，就会发生这种情况。

有compositionstart和 compositionupdate在这种情况下将触发的事件，因此您应该能够直接处理这些事件并取消它们...除了还没有浏览器支持取消这些事件...

所以你别无选择，只能等待这个组合结束，然后删除错误的输入。最好的方法可能是监听 input 事件。 (PS:无论如何，您可能更愿意检查输入的值，而不是测试所有 event.key，至少可以捕获粘贴的内容。)