遮蔽AngularJS

Question

是否可以在angularJS中创建一个看起来像这样的掩码

02年07月。

当用户点击文本框时，它应该更改为以下文本

0207

非常感谢！

Answer 1

您可以使用指令绑定到焦点和模糊事件。 http://plnkr.co/sFyfYstSlQpZtLUGbmwh

<input type="text" year-month data="foo.bar"></input>  

app.directive('yearMonth', function() {
    return {
        restrict: 'A',
        scope: {
          data: '='
        },
        link: function(scope, element, attr) {
          var re = /(\d{2})(\d{1,2})()/;

          function addMask(text) {
            return text.replace(re, "$1years$2months");
          }

          function removeMask(text) {
            return text.replace(re, "$1$2");
          }

          element.val(addMask(scope.data));

          element.bind('blur', function () {
            scope.$apply(function() {
              var text = element.val();

              scope.data = text;
              element.val(addMask(text));
            });
          });

          element.bind('focus', function () {
            scope.$apply(function() {
              element.val(removeMask(scope.data));
            });
          });
        }
    };
});

但是，请务必阅读以下问题：How to do two-way filtering in angular.js?使用parsers的{​​{1}}和formatters可能是一个更好的解决方案。

Answer 2

是的，请查看ui-mask指令。

http://angular-ui.github.io/ui-utils/