首页 文章

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

提问于
浏览 次
0

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

  • 我的目的：更改ngModel时捕获事件，删除非数字字符，然后使用ngModel将结果格式化为渲染 . $ viewValue并将过滤后的字符串返回到ngModel .

  • 问题：当MS IME（平假名）输入数字时，ngModel重复 .

  • 例如：输入300 => ngModel = 300300

  • 我的调查：输入300 => $ parser fired => set $ 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防止用户输入号码？ （谷歌浏览器）

谢谢 .

javascript angularjs google-chrome ime angular-ngmodel

1 回答

  • 1

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

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

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

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

    回复于

相关问题