Angularjs创建输入掩码

时间:2016-10-08 21:32:44

标签: javascript angularjs

我正在尝试创建一个指令来为我的输入创建自定义掩码。我知道我可以使用其他库,但有时我需要根据公司需要进行自定义输入(例如“OS.012-08765”),所以我宁愿创建自己的指令。

到目前为止,我能够在我需要的模式上格式化数字,但不能在输入上格式化,仅在模型上。对于这个例子,我将使用钱输入,因为它更容易使用(我认为)。这是我正在使用的代码:

function myMoney() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
            ngModelCtrl.$formatters.push( formatInput );
            ngModelCtrl.$render = renderViewValue;
            ngModelCtrl.$parsers.push( parseOutput );


            function formatInput( value ) {
                value = formatNumber(value);
                return value;
            }
            function parseOutput( value ) {
                value = formatNumber(value);
                return value;
            }
            function renderViewValue() {
                element.html( ngModelCtrl.$viewValue );
            }

            function formatNumber(value) {
                if(!value) {
                    value = '000';
                }

                var checkValue = value.replace(/[^0-9\.]/g, '');
                if(checkValue != value) {
                    value = checkValue;
                }

                value = value.toString();

                if(value.length < 3) {
                    value = ('000'+value).slice(-3);
                }

                var 
                    firstChar = value.slice(0, value.length-2),
                    lastChar  = value.slice(-2),
                    firstChar = Number(firstChar).toLocaleString(),
                    finalChar = '$'+firstChar+','+lastChar;

                return finalChar;
            }
        }
    }
}

这是一个代码为http://plnkr.co/edit/UjZkPFL0V4FRrDUL9jAJ?p=preview

的傻瓜

主要问题是输出的位置,如果你开始输入输入,那么值没有掩码,只是数字。但模型有适当的面具。

因此,基于此,我有两个主要问题:

  • 首先:我想反转这些结果。我想输入文本框并在文本框上设置掩码,而模型只是普通数字(没有掩码)。
  • 第二:如果我创建一个按钮来更新模型上的值,它就不会在掩码中进行格式化,而是保持纯文本。

我该如何解决这些问题?

1 个答案:

答案 0 :(得分:2)

尝试使用ui mask https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html,在 Mask Definition 字段下输入 AA.999-99999 以匹配您的模式。

<input type="text" 
       ng-model="serviceOrderNumber" 
       ui-mask="AA.999-99999"  
       ui-mask-placeholder 
       ui-mask-placeholder-char="_"/>