使用Microsoft IME Japanese输入数字时，AngularJs ngModel值会重复

Question

我的日语号有问题。当由IME输入时，ngModel被复制。

• 我的目的：更改ngModel时捕获事件，删除非数字字符，然后使用ngModel格式化结果。$ viewValue并将过滤后的字符串返回到ngModel。
• 问题：当MS IME（平假名）输入数字时，ngModel会重复。
• Ex：输入300 =＆gt; ngModel = 300300
• 我的调查：输入300 =＆gt; $ parser fired =＆gt;设置$ viewValue = 300，返回300到ngModel =＆gt; ngModel。$ render（）=＆gt; html更改为300（直到现在为止）=＆gt;错误的事情= => ngModel更改为300300 =＆gt; $ 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也会尝试在合成完成时设置它。实际行为因浏览器而异。谷歌浏览器一起接受你的JS值（300）和IME值（300），这就是300300的来源。

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

一种解决方法是使用setTimeout将JS setter执行延迟到IME compositionend，如小提琴所示。

在angular或jsfiddle中没有任何问题，如果没有在angular $ parsers函数中执行$render，一切正常。