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

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

您可以使用正则表达式来限制数字和乘号或自定义的东西

<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/

Answer 2

你可以试试这个

<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 3

可以使用 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>

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

How to give specific input type in html?

html

html-input

angularjs

The DEMO