angularjs：无法在数字类型的输入字段中显示特殊字符答案

【问题标题】：angularjs: Unable to display special characters in input field of type numberangularjs：无法在数字类型的输入字段中显示特殊字符
【发布时间】：2014-04-08 19:13:18
【问题描述】：

我在格式化输入字段时遇到了 angularjs 的问题。这是背景

我们需要一个信用卡输入文本字段，它需要是 type="number" 以便移动设备可以显示数字键盘。在 blur 事件中，我们需要屏蔽除最后 4 位之外的所有数字。

即使 angular ng-model 接受模型中的特殊字符，该值也不会显示在输入字段中。

这是说明问题的示例代码。

<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <meta charset="utf-8"/>
  </head>
  <body>
    <div ng-controller="PaymentController">
      Card Number 1:<input type="number" ng-model="ccard1" /> {{ccard1}} <br/>
      Card Number 2:<input type="number" ng-model="ccard2" /> {{ccard2}} <br/>
      Card Number 3:<input type="number" ng-model="ccard3" /> {{ccard3}}    
    </div>
    <script>
      function PaymentController($scope){
        $scope.ccard1=1234;   
        $scope.ccard2='1234';     
        $scope.ccard3='####';             
      }
    </script>
  </body>
</html>

这是jsbin demo

有人帮我解决这个问题吗？

【问题讨论】：

有什么问题 - 你将 type 设置为 number - 它只接受数字。
这不是 AngularJS 的问题。浏览器是阻止掩码的，因为输入类型是数字。

标签： html angularjs

【解决方案1】：

这是一个可行的解决方案，可能不是正确的方法。

创建一个指令并删除该字段的解析器和格式化程序。一个警告是表单验证不起作用，您必须手动验证。

paymentApp.directive('rawinput', function(){
    return {
        require: 'ngModel',
        priority: 100,
        link: function(scope, ele, attr, ngModel){
            ngModel.$parsers=[];
            ngModel.$formatters=[];
        }
    };
});

并像这样在需要的地方指定指令

<input type="number" ng-model="ccard3" rawinput/>

这是工作演示：http://jsbin.com/fated/2/edit

【讨论】：