javascript - 使用 Microsoft IME 日语输入数字时，AngularJs ngModel 值重复

Question

我的日语号码有问题。当通过 IME 输入时，ngModel 是重复的。

• 我的目的:捕获 ngModel 更改时的事件，删除非数字字符，然后格式化结果以使用 ngModel.$viewValue 进行渲染，并将过滤后的字符串返回给 ngModel。
• 问题:通过 MS IME(平假名)输入数字时，ngModel 重复。
• 例如:输入 300 => ngModel = 300300
• 我的调查:输入 300 => $parser 被触发 => 设置 $viewValue = 300，将 300 返回到 ngModel => ngModel.$render() => html 更改为 300(到目前为止还不错)=> 发生了一些错误=> ngModel 更改为 300300 => $parser 再次触发...

这是我第一次与日语合作，所以我目前不知道为什么会发生这种情况。我正在寻找您对此问题的经验。

ngModel.$parsers.unshift(function(inputValue){
     var digits = String(inputValue).split('').filter(function (s) { return (!isNaN(s) && s != ' '); }).join('');

     ngModel.$viewValue = digits;
     ngModel.$render();

     return digits;
});      

示例如下:http://jsfiddle.net/x0ervzr2/

*注意:在 jsfiddle 上我无法通过 IME 输入(也许它被禁用了？)

• 在我的计算机上:当我输入时，文本下方有下划线，然后我必须输入或聚焦才能将值应用到文本框
• 附带问题:如何防止用户通过 IME 输入数字？ (谷歌浏览器)

谢谢。

Answer 1

您正在通过 JavaScript 设置元素值，而 IME 也会在合成完成时尝试设置它。实际行为因浏览器而异。 Google Chrome 同时接受 JS 值 (300) 和 IME 值 (300)，这就是 300300 的来源。

您可以使用下面的 jsfiddle 测试此行为:
https://jsfiddle.net/bootleq/x14w3Lts/4/embedded/result/

解决方法是使用 setTimeout 将 JS setter 执行延迟到 IME 组合结束，如 fiddle 所示。

在 Angular 或 jsfiddle 中不会有任何问题，无需在 Angular $parsers 函数中执行 $render ，一切正常。