防止在输入数字

时间:2016-07-07 09:23:43

标签: angularjs html5

我有一个简单的输入数字:

<input type="number"/>

当尝试输入除数字或字母“e”以外的任何内容时,它不起作用,但当我输入字母“e”时,它可以正常工作。

我查看了w3.org规范,并清楚地说明浮动数字可以使用常规符号(例如10.2)或科学符号(例如:1e2)键入。

所以我的问题是:有没有办法阻止用户输入电子信件和点。换句话来说:有没有办法让输入数字接受仅限整数?

我有一个Angular指令的想法,我将输入作为输入数字的属性,但我真的不知道如何使用。

编辑:我想要做的是模拟我们现在在尝试输入除“e”以外的字母表中的任何其他字母时所具有的行为 , 要么 ”。”。我想说的是我不希望看到输入中出现的字母(就像现在的情况一样)。

2 个答案:

答案 0 :(得分:9)

你应该用指令完成它是正确的。只需创建一个指令并将其附加到input即可。该指令应该监听keypress和/或keydown事件。也可能粘贴事件。如果输入的字符是'e'或点 - 调用event.preventDefault();

angular.module('app', [])
  .directive('yrInteger', yrInteger);

function yrInteger() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
    
      element.on('keypress', function(event) {

        if ( !isIntegerChar() ) 
          event.preventDefault();
        
        function isIntegerChar() {
          return /[0-9]|-/.test(
            String.fromCharCode(event.which))
        }

      })       
    
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <input 
         type="number" 
         yr-integer
         />
</div>

答案 1 :(得分:0)

您只需在输入中使用ng-pattern

即可

<强>控制器

$scope.onlyDigits= /^\d+$/;

<强> HTML

<input ng-pattern="onlyDigits" type="number" />

此模式使用\d,用于任何数值