文本输入仅允许在angularjs中输入整数

Question

我想设置html输入[数字] 只<input type="number" />允许整数输入(不是浮点数).

基本上,html输入[number]允许'.' 输入浮动输入,我不希望这样.

有没有一种快速的方法可以在AngularJS中完成它？

Answer 1

以下是如何实现这一目标的.

1. 带输入类型 - 'text'

   指示:

   app.directive('onlyNumbers', function () {
       return  {
           restrict: 'A',
           link: function (scope, elm, attrs, ctrl) {
               elm.on('keydown', function (event) {
                   if(event.shiftKey){event.preventDefault(); return false;}
                   //console.log(event.which);
                   if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                       // backspace, enter, escape, arrows
                       return true;
                   } else if (event.which >= 48 && event.which <= 57) {
                       // numbers 0 to 9
                       return true;
                   } else if (event.which >= 96 && event.which <= 105) {
                       // numpad number
                       return true;
                   } 
                   // else if ([110, 190].indexOf(event.which) > -1) {
                   //     // dot and numpad dot
                   //     return true;
                   // }
                   else {
                       event.preventDefault();
                       return false;
                   }
               });
           }
       }
   });
   

   HTML:

   <input type="text" only-numbers>
   

2. 输入类型 - '数字'

   指示:

   app.directive('noFloat', function () {
   return  {
       restrict: 'A',
       link: function (scope, elm, attrs, ctrl) {
           elm.on('keydown', function (event) {
             if ([110, 190].indexOf(event.which) > -1) {
                   // dot and numpad dot
                   event.preventDefault();
                   return false;
               }
               else{
                 return true;
               }
           });
       }
   }
   });
   

   HTML: <input type="number" step="1" no-float>

查看Plunker

Answer 2

input[type=number]根据定义，仅接受整数作为输入。自己尝试一下。尝试输入字母，但它不会允许你。

不需要 JavaScript，因为它已经内置了。您的意思是吗input[type=text]？

您可以通过角度指令来实现这一点。它看起来像这样（但不确定我的语法）

app.directive('onlyNumbers', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind("keydown", function(event) {
                if ((event.keyCode > 47 && event.keyCode < 58) && !event.shiftKey) {
                    event.preventDefault();
                    return false;
                }
            });
        }
    });

语法可能有一些错误，但我将分解基本公式。

由于我们正在使用输入元素，因此使用指令是有意义的attribute。我们可以通过将restrict属性设置为 A 来做到这一点。

由于我们将监听按键事件，因此我们应该使用该link函数。我们想要监听该keydown事件，以检测何时开始按下某个键。

要查找用户是否键入了数字，我们将使用keyCodes，其中数字键为 48 到 57，分别代表 0 到 9。但是，我们没有考虑需要按数字键的特殊字符。所以我们确保也没有按下 Shift 键。

然后我们可以将该指令添加为输入元素上的属性。

<input type="text" only-numbers />