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

【问题标题】：Event.preventDefault does not work when I input cjk(korean) on number type v-text-field当我在数字类型 v-text-field 上输入 cjk(korean) 时，Event.preventDefault 不起作用
【发布时间】：2020-07-09 02:21:21
【问题描述】：

我正在做一个 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'和'+'、'.'。

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

另外，屏幕上显示的 v-text-field 的值为 '123ㅁ'，但使用 console.log(event) 获取的 event.target.value 的值为' '。

我想阻止输入韩文字符（或 CJK）或立即删除它们，即使它们在没有删除 'type="number"' 的情况下输入。

我能为它做些什么？

【问题讨论】：

我相信在这种情况下，您可以创建一个正则表达式并使用 unicodes 过滤它们。 regular-expressions.info/unicode.html#prop 这也有帮助 stackoverflow.com/questions/21109011/…
我认为我的问题可能会让人误解。我将编辑我的问题。我的问题是if() 中的值没有被过滤，但是在执行 preventDefault() 时没有正确执行所需的操作。
汉字（还有其他亚洲字符）需要多个按键才能输入单个汉字符号 - 如果您正在过滤按键，则您正在破坏 IME（输入法编辑器）。您应该删除 @keydown 处理程序，而是在您的 v-model 上放置一个观察程序 - 这样您只能在完全输入汉字符号后做出反应，但不能在此之前做出反应。
我终于解决了我的问题。我设置了听众，其中两个做重要的工作。 CompositionStartListener 执行 this.$emit('input', ''); 和 InputListener 执行 this.$emit('input', Number(this.preValue)); 当我让 InputListener 执行 this.$emit('input', ''); this.$emit('input', Number(this.preValue)); 它不起作用我想要的如果这里有人有类似的问题，我希望你能解决他们。

标签： javascript html vue.js vuetify.js

【解决方案1】：

这称为合成，当您需要在合成单个字符之前键入多个笔划时，它会在某些 IME 上发生。

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

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

【讨论】：

感谢您的回答。我首先知道作曲事件。所以我搜索它，我得到了在我的 v-text-view 中无法阻止输入韩语的结果。（或者它可以解决，但我不能）我将研究通过其他方式解决我的问题。谢谢。