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

【问题标题】：AngularJs ngModel value is duplicated when input number by using Microsoft IME Japanese使用 Microsoft IME 日语输入数字时，AngularJs ngModel 值重复
【发布时间】：2015-03-25 19:08:18
【问题描述】：

我对日本号码有疑问。当通过 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 输入数字？（谷歌浏览器）

谢谢。

【问题讨论】：

我最终得到了这个代码：$(element).attr('type', 'tel'); 当文本框被聚焦时，这个代码将不活动 IME。我想禁用 IME，但谷歌浏览器还不支持 :(，希望有一天它会。

标签： javascript angularjs google-chrome ime angular-ngmodel

【解决方案1】：

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

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

一种解决方法是使用setTimeout 将您的 JS setter 执行延迟到 IME 组合结束，如小提琴所示。

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

【讨论】：