Как дать конкретный тип ввода в HTML? - PullRequest
Новая
       27

Как дать конкретный тип ввода в HTML?

0 голосов
/ 16 мая 2019

У меня есть поле ввода "Размер", которое может принимать значения типа (21 x 12, 12"4' x 21" 12'). Как я могу управлять полем ввода в HTML таким образом, чтобы он позволял пользователю вводить только числа и (X,',"") и ограничивать другие символы и алфавиты? Я использовал AngularJS в качестве контроллера VM 

<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, ', ""

Ответы [ 3 ]

2 голосов
/ 16 мая 2019

Вы можете попробовать это 

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

1 голос
/ 16 мая 2019

Можно использовать директиву ng-pattern: 

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

Для получения дополнительной информации см.

ДЕМО 

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>
0 голосов
/ 16 мая 2019

Вы можете использовать регулярное выражение до ограничение число и умножение знака или что-то нестандартное 

<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;
        }
      });
    }
  };
});
...