angularjs allows only numbers to be typed into a text box

Question

In angularjs is there any functionality available that allows only numbers to be typed into a text box like

User · Answer

This code shows the example how to prevent entering non digit symbols   angular module  app      directive  onlyDigits   function           return           restrict   A           require    ngModel           link  function  scope  element  attrs  modelCtrl                modelCtrl  parsers push function  inputValue                    if  inputValue    undefined  return                     var transformedInput   inputValue replace    0-9  g                       if  transformedInput     inputValue                        modelCtrl  setViewValue transformedInput                       modelCtrl  render                                      return transformedInput

User · Answer

This is the method that works for me  It s based in samnau anwser but allows to submit the form with ENTER  increase and decrease the number with UP and DOWN arrows  edition with DEL BACKSPACE LEFT and RIGHT  and navigate trough fields with TAB  Note that it works for positive integers such as an amount   HTML    lt input ng-keypress  onlyNumbers  event   min  0  type  number  step  1  ng-pattern     0-9  1 8     ng-model       gt    ANGULARJS     scope onlyNumbers   function event          var keys            up   38  right  39  down  40  left  37           escape  27  backspace  8  tab  9  enter  13  del  46           0  48  1  49  2  50  3  51  4  52  5  53  6  54  7  55  8  56  9  57            for var index in keys            if   keys hasOwnProperty index   continue          if  event charCode  keys index   event keyCode  keys index                 return    default event                        event preventDefault

User · Answer

You can check  https   github com rajesh38 ng-only-number   It restricts input to only numbers and decimal point in a textbox while typing  You can limit the number of digits to be allowed before and after the decimal point It also trims the digits after the decimal point if the decimal point is removed from the textbox e g  if you have put 123 45 and then remove the decimal point it will also remove the trailing digits after the decimal point and make it 123

User · Answer

My solution accept Copy amp Paste and save the position of the caret  It s used for cost of products so allows positive decimal values only  Can be refactor very easy to allow negative or just integer digits    angular          module  client            directive  onlyNumber   function                  return                   restrict   A                   link  function  scope  element  attr                        element bind  input   function                              var position   this selectionStart - 1                             remove all but number and                           var fixed   this value replace    0-9    g                                 if  fixed charAt 0                              can t start with                               fixed   fixed slice 1                            var pos   fixed indexOf        1                          if  pos  gt   0                  avoid more than one                               fixed   fixed substr 0  pos    fixed slice pos  replace                                      if  this value     fixed                                this value   fixed                              this selectionStart   position                              this selectionEnd   position                                                                                                   Put on the html page    lt input type  text  class  form-control  only-number ng-model  vm cost    gt

User · Answer

It s simple and understandable  Just copy paste this code and your issue will get resolved For more conditions just change the value in pattern and your work will done    lt input type  text   pattern   0-9  0    oninvalid  this setCustomValidity  Please enter only numeric value  Special character are not allowed     oninput  setCustomValidity      gt

User · Answer

lt input     onkeypress  return  event charCode  gt   48  amp  amp  event charCode  lt   57                                  event charCode    0    event charCode    46  gt

User · Answer

I have done at   js   scope numberOnly     0-9          html   lt input type  text  name  rollNo  ng-model  stud rollNo  ng-pattern  numberOnly  ng-maxlength  10  maxlength  10  md-maxlength  10  ng-required  true   gt

User · Answer

Simply use HTML5    lt input type  number  min  0   gt

User · Answer

This answer serves as a simplification and optimisation over Leopoldo s answer   Trigger a function from your input on every keydown like this    lt input type  text  ng-keydown  onlyNumbers  event     gt    You can describe the function in this manner in your controller   scope onlyNumbers   function event               up   38  right  39  down  40  left  37          escape  27  backspace  8  tab  9  enter  13  del  46          0  48  1  49  2  50  3  51  4  52  5  53  6  54  7  55  8  56  9  57     var keys     38 true 39 true 40 true 37 true 27 true 8 true 9 true 13 true                   46 true 48 true 49 true  50 true 51 true 52 true 53 true                   54 true 55 true 56 true 57 true            if the pressed key is not listed  do not perform any action     if  keys event keyCode     event preventDefault          In case you re using Angular 2   you can call this same function in this manner    lt input type  text   keydown   onlyNumbers  event     gt    Your Angular 2  function should look something like this   onlyNumbers event       the logic here

User · Answer

HTML    lt input type  text  name  number  only-digits gt       Just type 123     directive  onlyDigits   function          return         require   ngModel         restrict   A         link  function  scope  element  attr  ctrl            function inputValue val              if  val                var digits   val replace    0-9  g                    if  digits     val                  ctrl  setViewValue digits                 ctrl  render                              return parseInt digits 10                         return undefined                                ctrl  parsers push inputValue                           type  123 or 123 45    directive  onlyDigits   function          return         require   ngModel         restrict   A         link  function  scope  element  attr  ctrl            function inputValue val              if  val                var digits   val replace    0-9   g                    if  digits split      length  gt  2                  digits   digits substring 0  digits length - 1                              if  digits     val                  ctrl  setViewValue digits                 ctrl  render                              return parseFloat digits                         return undefined                                ctrl  parsers push inputValue

User · Answer

I just used ng-keypress in the directive for my input   HTML    lt input type  text  ng-keypress  filterValue  event    gt    JS    scope filterValue   function  event           if isNaN String fromCharCode  event keyCode                  event preventDefault

User · Answer

I know this is an old post but this adaptation of My Mai s answer works nicely for me     angular module  app   directive  numbersOnly   function       return       require   ngModel       restrict   A       link  function scope  element  attr  ctrl            function inputValue val                if  val                      transform val to a string so replace works                 var myVal   val toString                       replace any non numeric characters with nothing                 var digits   myVal replace   D g                          if anything needs replacing - do it                  if  digits     myVal                        ctrl  setViewValue digits                       ctrl  render                                      return parseFloat digits                             return undefined                    ctrl  parsers push inputValue

User · Answer

I had a similar issue and ended up hooking and event   ng-change  changeCount       then   self changeCount   function            if   self info itemcount            self info itemcount   1                So the user is defaulted to 1 if a invalid number is inserted

User · Answer

Use ng-only-number to allow only numbers  for example    lt input type  text  ng-only-number data-max-length 5 gt

User · Answer

You could do something like this  Use ng-pattern with the RegExp     0-9      that means only integer numbers are valid    lt form novalidate name  form  gt       lt input type  text  data-ng-model  age  id  age  name  age  ng-pattern     0-9      gt       lt span ng-show  form age  error pattern  gt The value is not a valid integer lt  span gt   lt  form gt

User · Answer

lt input type  text  ng-keypress  checkNumeric  event    gt     inside controller   scope dot   false   scope checkNumeric   function  event    if String fromCharCode  event keyCode          amp  amp    scope dot        scope dot   true     else if  isNaN String fromCharCode  event keyCode         event preventDefault

User · Answer

This solution will accept only numeric      and  -    Also this restricts the space entry on text box  I had used the directive to achieve the same   Please have the solution on below working example   http   jsfiddle net vfsHX 2697   HTML    lt form ng-app  myapp  name  myform  novalidate gt    lt div ng-controller  Ctrl  gt   lt input name  number  is-number ng-model  wks number  gt   lt span ng-show   wks validity  gt Value is invalid lt  span gt   lt  div gt      JS   var  scope  var app   angular module  myapp         app controller  Ctrl   function  scope         scope wks     number  1  validity  true       app directive  isNumber   function          return           require   ngModel           link  function  scope  element  attrs  ngModel               element bind  keydown keypress   function  event              if event which     32                event returnValue   false              return false                                      scope  watch attrs ngModel  function newValue oldValue                    var arr   String newValue  split                      if  arr length     0  return                  if  arr length     1  amp  amp   arr 0      -     arr 0             return                  if  arr length     2  amp  amp  newValue      -    return                  if  isNaN newValue                           scope wks number   oldValue                      ngModel  setViewValue oldValue                                       ngModel  render

User · Answer

lt input type  phone  numbers-only  gt    You can use this way if you want only numbers     here is the the demo click

User · Answer

This functionality just what you need  http   docs angularjs org api ng directive input number  EDIT   You can wrap the jquery plugin into directive  I created an example here  http   jsfiddle net anazimok jTJCF   HTML    lt div ng-app  myApp  gt       lt div gt           lt input type  text  min  0  max  99  number-mask    ng-model  message  gt               lt button ng-click  handleClick    gt Broadcast lt  button gt       lt  div gt    lt  div gt    CSS    ng-invalid       border  1px solid red      JS      declare a module var app   angular module  myApp         app directive  numberMask   function         return           restrict   A           link  function scope  element  attrs                  element  numeric

User · Answer

I arraged the jQuery in this   directive  numbersCommaOnly   function       return        require   ngModel        link  function  scope  element  attrs  ngModel             element on  keydown   function event                                     Allow  backspace  delete  tab  escape  enter and               var array2    46  8  9  27  13  110  190              if  array2 indexOf event which      -1                        Allow  Ctrl A                  event which    65  amp  amp  event ctrlKey     true                         Allow  Ctrl C                  event which    67  amp  amp  event ctrlKey     true                         Allow  Ctrl X                  event which    88  amp  amp  event ctrlKey     true                         Allow  home  end  left  right                  event which  gt   35  amp  amp  event which  lt   39                             let it happen  don t do anything                      return                               Ensure that it is a number and stop the keypress             if   event shiftKey     event which  lt  48    event which  gt  57    amp  amp   event which  lt  96    event which  gt  105                     event preventDefault

User · Answer

To build on Anton s answer a little --  angular module  app   directive  onlyDigits   function          return           restrict   EA           require    ngModel           scope               allowDecimal                   allowNegative                   minNum                   maxNum                          link  function  scope  element  attrs  ngModel                        if   ngModel  return              ngModel  parsers unshift function  inputValue                                var decimalFound   false                  var digits   inputValue split     filter function  s i                                        var b     isNaN s   amp  amp  s                              if   b  amp  amp  attrs allowDecimal  amp  amp  attrs allowDecimal     true                                                 if  s         amp  amp  decimalFound    false                                                        decimalFound   true                              b   true                                                                      if   b  amp  amp  attrs allowNegative  amp  amp  attrs allowNegative     true                                                 b    s     -   amp  amp  i    0                                              return b                     join                      if  attrs maxNum  amp  amp   isNaN attrs maxNum   amp  amp  parseFloat digits   gt  parseFloat attrs maxNum                                         digits   attrs maxNum                                    if  attrs minNum  amp  amp   isNaN attrs minNum   amp  amp  parseFloat digits   lt  parseFloat attrs minNum                                         digits   attrs minNum                                    ngModel  viewValue   digits                  ngModel  render                     return digits

User · Answer

Based on djsiz solution  wrapped in directive  NOTE  it will not handle digit numbers  but it can be easily updated  angular          module  app            directive  mwInputRestrict                 function                      return                       restrict   A                       link  function  scope  element  attrs                            element on  keypress   function  event                                if  attrs mwInputRestrict      onlynumbers                                        allow only digits to be entered  or backspace and delete keys to be pressed                                 return  event charCode  gt   48  amp  amp  event charCode  lt   57                                             event keyCode     8    event keyCode     46                                                             return true                                                                                                  HTML    lt input type  text          class  form-control          id  inputHeight          name  inputHeight          placeholder  Height          mw-input-restrict  onlynumbers          ng-model  ctbtVm dto height  gt

User · Answer

This is the simplest and fastest way  for allowing the Number input only    lt input type  text  id  cardno  placeholder  Enter a Number  onkeypress  return event charCode  gt   48  amp  amp  event charCode  lt   57  required gt    Thanks

[javascript] angularjs: allows only numbers to be typed into a text box

Examples related to javascript

Examples related to ruby-on-rails

Examples related to angularjs

Examples related to numeric