Question

我有一个输入字段“ Size”，可以接受诸如(21 x 12, 12"4' x 21" 12'之类的值。如何控制HTML中的输入字段，使用户只能输入数字和(X,',"")，并限制其他字符和字母？我已经将AngularJS用作vm Controller

<div class="clearfix">
    <div class="col-xs-4 pad-0">
        <label>Size</label>
    </div>
    <div class="col-xs-8 pad-col-7">
        <div class="form-group ">
            <md-input-container class="block typefield">
                <input type="number" ng-model="vm.MappedMediaLineItem.UnitSize">
            </md-input-container>
        </div>
    </div>
</div>

现在我正在使用类型作为数字，但是不允许我输入X，'，“”

Answer 1

您可以尝试

<div ng-app="myModule">
  <div ng-controller="myController">
      <input type="text" ng-model="searchTerms" ng-keypress="searchKeyup($event)"  placeholder="">
  </div>
</div>

在控制器中

var module = angular.module("myModule", []);
module.controller("myController", function($scope) {
    $scope.searchKeyup = function (e) {

       var keyCode = (e.keyCode ? e.keyCode : e.which);
    if ((keyCode >= 48 && keyCode <= 57) || (keyCode === 120) || (keyCode === 39) || (keyCode === 34)){
        console.log("true");

    }
    else{
    console.log("false");
    e.preventDefault();
    }
    };
});

从此处https://keycode.info/

了解密钥代码

Answer 2

一个人可以使用ng-pattern指令：

<input ng-model="unitSize" ng-pattern="regex">

有关更多信息，请参见

AngularJS ng-pattern Directive API Reference

The DEMO

angular.module("app",[])
.controller("ctrl", function($scope) {
  $scope.regex='[\\d+xX' + '\\"' + "\\'" + ']+';
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
    unitSize={{unitSize}}<br>
    <input ng-model="unitSize" ng-pattern="regex">
</body>

Answer 3

您可以使用正则表达式来限制数字并乘以符号或自定义项

<input ng-model="vm.MappedMediaLineItem.UnitSize"
       restrict-input="{regex: '^[13579*]*$'}"/>

自定义限制-仅带乘法的奇数位-> {{vm.MappedMediaLineItem.UnitSize}}

app.directive('restrictInput', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        var options = scope.$eval(attr.restrictInput);
        if (!options.regex && options.type) {
          switch (options.type) {
            case 'digitsOnly': options.regex = '^[0-9]*$'; break;
            case 'lettersOnly': options.regex = '^[a-zA-Z]*$'; break;
            case 'lowercaseLettersOnly': options.regex = '^[a-z]*$'; break;
            case 'uppercaseLettersOnly': options.regex = '^[A-Z]*$'; break;
            case 'lettersAndDigitsOnly': options.regex = '^[a-zA-Z0-9]*$'; break;
            case 'validPhoneCharsOnly': options.regex = '^[0-9 ()/-]*$'; break;
            default: options.regex = '';
          }
        }
        var reg = new RegExp(options.regex);
        if (reg.test(viewValue)) { //if valid view value, return it
          return viewValue;
        } else { //if not valid view value, use the model value (or empty string if that's also invalid)
          var overrideValue = (reg.test(ctrl.$modelValue) ? ctrl.$modelValue : '');
          element.val(overrideValue);
          return overrideValue;
        }
      });
    }
  };
});

您也可以使用此http://embed.plnkr.co/8NmBQm/

如何在html中指定特定的输入类型？

3 个答案:

The DEMO