angularjs掩码覆盖字符

时间:2013-09-25 06:06:51

标签: angularjs mask angular-ui

我在日期字段上使用angular-ui mask模块进行了掩码设置,如下所示:

<input type="text"
     id="date"
     ng-model="transaction.date"
     ui-mask="99/99/9999" />

如果我在该字段中有30/05/2013,并且想要将其更改为10/05/2013,只需在开头放一个'1',它就会将所有字符推到一边,这样它就会变成13/00/5201。

有没有办法强制ui-mask覆盖插入它的角色? (这样可以避免某人点击'删除'然后再打字。

示例:http://jsfiddle.net/5NbD7/ 如果你在我的例子的前面键入'30',你将最终得到30/01/0120我宁愿它覆盖字符并产生30/01/2010

2 个答案:

答案 0 :(得分:4)

我不知道有更简单的方法,但您尝试以下方法:

  • 你需要从源代码下载mask.js,unminified,并在你的html中链接它,如果你还没有这样做的话。

https://rawgithub.com/angular-ui/ui-utils/master/modules/mask/mask.js

  • 然后你需要像这样修改mask.js的源代码(搜索评论//Update Values并将此代码放在下面):

...

         // Update values
          if (oldValueUnmasked !== "" && oldValueUnmasked!==valUnmasked && !isDeletion) {
             var charIndex = maskCaretMap.indexOf(caretPos);
             if (charIndex === -1) {
               charIndex = maskCaretMap.indexOf(caretPos+1);
             }
             valUnmasked=valUnmasked.substr(0,charIndex).concat(oldValueUnmasked.substr(charIndex,valUnmasked.length));
           }

...

现在,在更新值之前,mask将对旧值中的字符和新值中的字符进行串联,具体取决于光标(插入符号)的位置。

这绝不是一个防范解决方案,但它应该让你知道如果你想更多地定制输入,或者检查这个改变不会破坏其他任何东西。

小提琴: http://jsfiddle.net/CALvj/

答案 1 :(得分:1)

我认为插入类型字符的方式或覆盖输入文本取决于键盘当前插入模式。用户只需按下Ins键即可更改默认值。 从代码中更改它的唯一方法是强制按下Ins键,但Javascript中不允许这样做。