How to give specific input type in html?

Question

I have an input field, "Size", which can accept values like (21 x 12, 12"4' x 21" 12'). How can I control the input field in HTML in such a way that it allows the user to only enter Numbers and (X,',""), and restrict other characters and alphabets? I have used AngularJS as 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>

Right Now I am using type as Number but it dosen't allow me to enter X,',""

This question: [HTML5 restricting input characters](https://stackoverflow.com/questions/13607278/html5-restricting-input-characters) might help you — Joe B., May 16 '19 at 05:19

JustCode · Accepted Answer · 2019-05-17T06:29:39.777

2

You can try this

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

In Controller

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

Know the Keycode from here https://keycode.info/

edited May 17 '19 at 06:29

answered May 16 '19 at 07:02

JustCode

661
1
8
19

I tried ```vm.MappedMediaLineItem.UnitSize = vm.MappedMediaLineItem.UnitSize + $event.key``` on true condition ani ```vm.MappedMediaLineItem.UnitSize = vm.MappedMediaLineItem.UnitSize ``` on false condition as a result i got two value in true condition and one value on false condition for eg :- if i type x (which is valid) i get xx on input field and if i type p(which is false condition) i get p on input field how can i solve this? – Biraz Dahal May 16 '19 at 11:07
make sure your input type is text not number. – JustCode May 16 '19 at 12:51
Finally Its Done Thanks – Biraz Dahal May 17 '19 at 04:36
`keyCode` and `which` are both deprecated. You should be using `key` or `code` instead. I would also recommend you take a look at this other key inspection tool: https://keyjs.dev – Danziger Sep 27 '20 at 05:00

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

One can use the ng-pattern directive:

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

For more information, see

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>

score 0 · Answer 3 · edited May 16 '19 at 11:28

You can use regular expression to restrict number and multiply sign or somthing custom

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

Custom restrict - odd digits only with multiply - > {{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;
        }
      });
    }
  };
});

Also for reference you can use this http://embed.plnkr.co/8NmBQm/

How to give specific input type in html?

3 Answers3

The DEMO