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

Question

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

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

\n

但它不能阻止韩语（也许是CJK），例如'\xe3\x85\x81'。（当我输入韩语时，event.key 返回“进程”）和“输入错误！！！” 已记录我的 Chrome 控制台。

\n

另外，屏幕上显示的 v-text-field 的值为“123\xe3\x85\x81”，但使用 console.log(event) 获取的 event.target.value 的值为“ ”。

\n

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

\n

我能为它做些什么呢？

\n

Answer 1

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

在这种情况下，有compositionstart一些compositionupdate事件会触发，所以你应该能够直接处理这些事件并取消它们...除了还没有浏览器支持取消这些事件...

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