Question

我试图阻止非数字字符在带有angularjs指令的tel和numeric输入中显示。

<input type="tel" ... />
<input type="number" ... />

我发现this几乎完美的Stack Overflow答案，但它只适用于文本输入。我需要使用电话和号码输入，以便在移动设备上显示正确的键盘。

如何使用此指令处理电话和号码输入？

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
});

app.directive('validNumber', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if(!ngModelCtrl) {
        return; 
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (angular.isUndefined(val)) {
            var val = '';
        }
        var clean = val.replace( /[^0-9]+/g, '');
        if (val !== clean) {
          ngModelCtrl.$setViewValue(clean);
          ngModelCtrl.$render();
        }
        return clean;
      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
});

可以找到使用近乎工作指令的Codepen here。

Answer 1

＆＃34;如果有一个最不充分利用的输入类型，那就是它。联系电话为用户提供数字键盘。如果你想从用户那里得到的只是一个你应该使用tel输入类型的号码。忘记使用号码，因为这实际上包括一堆不是数字的东西。＆＃34;

（来自http://mobileinputtypes.com）

您是否尝试将文字类型更改为type="tel"？

该指令继续在计算机上运行，并在移动设备上显示数字键盘。

Angularjs：只允许将数字输入tel和numeric输入

1 个答案: