2

Ok i have input field:

<input type="text" class="form-control" ng-model="ticketPin">

I want to allow user to enter only numbers, 10 digts long(1234567890)

I tried with type="number" but thats not it. Any suggestion

EDIT: so i can use maxlength for 10 digits long, but what about to restrict only to numbers? EDIT: pattern ="[0-9]*" is not working for me

1

5 Answers 5

6

You need to use maxlength attribute

<input type="text" class="form-control" ng-model="ticketPin" maxlength="10">
9
  • what about restrict to only numbers?
    – uzhas
    Jul 20, 2015 at 13:59
  • 1
    You need to use pattern pattern="[0-9]*" and additionally use minlength="10" as well if you want to make sure you enter exact 10 numbers. Jul 20, 2015 at 14:06
  • hmm...its not working for me ...i still can enter letters
    – uzhas
    Jul 20, 2015 at 14:08
  • It works well for me. Can you share me the updated input element Jul 20, 2015 at 14:10
  • <input type="text" class="form-control" ng-model="ticketPin" maxlength="10" pattern="[0-9]*">
    – uzhas
    Jul 20, 2015 at 14:12
3

you can do this to make sure that entered value is number and is not more than 10 digit.

<input type="text" class="form-control" ng-model="ticketPin" pattern="[0-9]*" maxlength="10">
2

Try this plugin http://candreoliveira.github.io/bower_components/angular-mask/examples/index.html#/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="//rawgit.com/candreoliveira/ngMask/master/dist/ngMask.min.js"></script>

  
</head>
<body ng-app="selectExample">
  <script>
    angular.module('selectExample', ['ngMask'])
  </script>
  <div>
     <input type='text' mask-clean='true' ng-model='ticketPin' mask='9999999999' restrict="reject" clean="true" />
  </div>
   {{ticketPin}}
  </body>

</html>

0

To ensure user inputs only numbers, you can use pattern attribute:

<input type="text" class="form-control" ng-model="ticketPin" pattern="[0-9]{10}">

This technique will not work in all browsers, see http://caniuse.com/#feat=input-pattern

Validation will be performed only in browser, don't forget to validate the data again on server.

2
  • This will work but note that not all mobile devices are smart enough to trigger the numeric keyboard
    – Johannes
    Jul 20, 2015 at 14:05
  • True. Try type="number" instead of type="text". Jul 20, 2015 at 14:14
0

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;

}
 <input id="Phone" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" type="number" max = "9999999999" placeholder="Phone Number" />

<script>
  function maxLengthCheck(object) {
    if (object.value.length > object.max.length)
      object.value = object.value.slice(0, object.max.length)
  }
    
  function isNumeric (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]|\./;
    if ( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
    }
  }
</script>

jsfiddle here:

https://jsfiddle.net/DharaPatel0621/mo9qgk31/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.