How to enter only 10 numbers in input field?

Question

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

Duplicate - http://stackoverflow.com/questions/113376/character-limit-in-html — 2ne, Jul 20 '15 at 13:58

score 6 · Answer 1 · answered Jul 20 '15 at 13:57

6

You need to use maxlength attribute

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

answered Jul 20 '15 at 13:57

Nikhil Aggarwal

28,197
4
43
59

what about restrict to only numbers? – uzhas Jul 20 '15 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. – Nikhil Aggarwal Jul 20 '15 at 14:06
hmm...its not working for me ...i still can enter letters – uzhas Jul 20 '15 at 14:08
It works well for me. Can you share me the updated input element – Nikhil Aggarwal Jul 20 '15 at 14:10
– uzhas Jul 20 '15 at 14:12
Okay now, I got it. The pattern will not stop you from entering alphabets, however, will give you a validation error at the time of submit. You need to use `keyup` event in order to check. – Nikhil Aggarwal Jul 20 '15 at 14:15
its chrome...V43.0.2357.134 m – uzhas Jul 20 '15 at 14:16
is there any way to prevent using anything other than letters on start? – uzhas Jul 20 '15 at 14:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/83763/discussion-between-nikhil-and-uzhas). – Nikhil Aggarwal Jul 20 '15 at 14:20

score 3 · Answer 2 · answered Jul 20 '15 at 14:04

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

answered Jul 20 '15 at 14:04

ngLover

4,439
3
20
42

score 2 · Answer 3 · answered Jul 20 '15 at 14:27

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>

score 0 · Answer 4 · answered Jul 20 '15 at 14:01

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.

answered Jul 20 '15 at 14:01

Ondra Koupil

1,034
6
9

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

Dhara Patel · Answer 5 · 2017-10-11T16:51:56.507

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/

How to enter only 10 numbers in input field?

5 Answers5