angularjs：无法在数字类型的输入字段中显示特殊字符
Posted
技术标签:
【中文标题】angularjs：无法在数字类型的输入字段中显示特殊字符【英文标题】：angularjs: Unable to display special characters in input field of type number 【发布时间】：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 的问题。浏览器是阻止掩码的，因为输入类型是数字。
【参考方案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
【讨论】：
以上是关于angularjs：无法在数字类型的输入字段中显示特殊字符的主要内容，如果未能解决你的问题，请参考以下文章
在javascript的输入数字类型字段中输入值时如何显示输入文本字段？