Question

我需要限制在文本框中输入的数字。用户只能在1秒后输入回车键。因此，每个键输入必须有1秒之间的时间。

目标是防止在文本框中严格键入数字。

实施例：输入数字1，然后输入间隙1秒，然后输入数字2。

如果用户输入1然后立即输入数字2，则文本框将只有1. 2应该被忽略。

我尝试了settimeout组合来设置变量值。我正在尝试的示例代码。

＆＃13;

var app = angular.module('myApply', []);
var allowKeyPress = true;
app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$parsers.push(function(value) {
        if (value === undefined) return '';
        var inputValue = value.replace(/[^0-9\/]/g, '');
        inputValue = inputValue.replace( /^\\s*/, "" ).replace( /\\s*$/, "" );
        if (inputValue != value) {
          ctrl.$setViewValue(inputValue);
          ctrl.$render();
        }
        return inputValue;
      });

      elem.on("keyup", function(scope) {
////logicssss

      });
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApply">
<head>
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.2.7/angular.js"></script>
  <script src="script.js"></script>
  <link href="style.css" media="all" rel="stylesheet" type="text/css">
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="wrapper">
      <form name="form">
        <div class="row">
          <div class="col-xs-12">
          </div>
          <div class="col-xs-6 col-sm-4">
            <fieldset>
              <input type="text" date-format ng-model="date" maxlength="10" class="form-control" />
            </fieldset>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

尝试在keypress事件上设置超时。如果在前一秒按下某个键，则阻止该事件。

＆＃13;

var app = angular.module('myApply', []);
var allowKeyPress = true;
app.directive('dateFormat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ctrl) {
      ctrl.$parsers.push(function(value) {
        if (value === undefined) return '';
        var inputValue = value.replace(/[^0-9\/]/g, '');
        inputValue = inputValue.replace( /^\\s*/, "" ).replace( /\\s*$/, "" );
        if (inputValue != value) {
          ctrl.$setViewValue(inputValue);
          ctrl.$render();
        }
        return inputValue;
      });
      var waiting;
      elem.on("keypress", function(e) {
////logicssss
           if (waiting) {
               e.preventDefault();
               return;
           }
           waiting = true;
           setTimeout(function() { waiting = false; }, 1000);
      });
    }
  };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myApply">
<head>
  <title></title>
  <link rel="stylesheet" href="style.css">
  <script src="http://code.angularjs.org/1.2.7/angular.js"></script>
  <script src="script.js"></script>
  <link href="style.css" media="all" rel="stylesheet" type="text/css">
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container">
    <div class="wrapper">
      <form name="form">
        <div class="row">
          <div class="col-xs-12">
          </div>
          <div class="col-xs-6 col-sm-4">
            <fieldset>
              <input type="text" date-format ng-model="date" maxlength="10" class="form-control" />
            </fieldset>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>
</html>

＆＃13;

如何限制angularjs指令中的输入？

1 个答案: