How do I restrict an input to only accept numbers

Question

I am using ngChange in AngularJS to trigger a custom function that will remove any letters the user adds to the input    lt input type  text  name  inputName  data-ng-change  numbersOnly     gt    The problem is that I need to target the input that triggered numbersOnly   so that I can remove the letters entered  I have looked long and hard on Google and was unable to find anything regarding this   What can I do

User · Answer

DECIMAL  directive  decimal   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                                                       ctrl  parsers push inputValue                                                              DIGITS  directive  entero   function                 return                   require   ngModel                   restrict   A                   link  function scope  element  attr  ctrl                        function inputValue val                            if  val                                var value   val         convert to string                             var digits   value replace    0-9  g                                    if  digits     value                                    ctrl  setViewValue digits                                   ctrl  render                                                              return parseInt digits                                                     return                                               ctrl  parsers push inputValue                                                  angular directives for validate numbers

User · Answer

Here is a pretty good solution to makes only allow enter number to the input    lt input type  text  ng-model  myText  name  inputName  onkeypress  return event charCode  gt   48  amp  amp  event charCode  lt   57   gt

User · Answer

None of the solutions proposed worked fine for me  and after a couple of hours I finally found the way   This is the angular directive   angular module  app   directive  restrictTo   function         return           restrict   A           link  function  scope  element  attrs                var re   RegExp attrs restrictTo               var exclude    Backspace Enter Tab Delete Del ArrowUp Up ArrowDown Down ArrowLeft Left ArrowRight Right                element 0  addEventListener  keydown   function event                    if   exclude test event key   amp  amp   re test event key                         event preventDefault                                                            And the input would look like    lt input type  number  min  0  name  inputName  ng-model  myModel  restrict-to   0-9   gt    The regular expression evaluates the pressed key  not the value   It also works perfectly with inputs type  number  because prevents from changing its value  so the key is never displayed and it does not mess with the model

User · Answer

Here is a Plunker handling any situation above proposition do not handle  By using  formatters and  parsers pipeline and avoiding type  number   And here is the explanation of problems solutions  also available in the Plunker               Limit input text for floating numbers     It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals     min and max attributes can be added  They can be Integers as well as Floating values        value needed         directive    ------------------------------------    55                   max-integer  2     55 55                max-integer  4  decimal  2   decimals are substracted from total length  Same logic as database NUMBER type           Input type  number   HTML5        Browser compatibility for input type  number       Chrome   - if first letter is a String   allows everything             - if first letter is a Integer   allows  0-9  and     and  e   exponential     Firefox   allows everything    Internet Explorer   allows everything       Why you should not use input type  number       When using input type  number  the  parser pipeline of ngModel controller won t be able to access NaN values     For example   viewValue    1e   - gt   parsers parameter value          This is because undefined values are not allowes by default  which can be changed  but better not do it     This makes it impossible to modify the view and model value  to get the view value  pop last character  apply to the view and return to the model        About the ngModel controller pipelines      view value - gt   parsers - gt  model value    model value - gt   formatters - gt  view value       About the  parsers pipeline      It is an array of functions executed in ascending order     When used with input type  number       This array has 2 default functions  one of them transforms the datatype of the value from String to Number     To be able to change the value easier  substring   it is better to have access to a String rather than a Number     To access a String  the custom function added to the  parsers pipeline should be unshifted rather than pushed     Unshift gives the closest access to the view        About the  formatters pipeline      It is executed in descending order    When used with input type  number     Default function transforms the value datatype from Number to String     To access a String  push to this pipeline   push brings the function closest to the view value        The flow      When changing ngModel where the directive stands    In this case only the view has to be changed   parsers returns the changed model         -When the value do not has to be modified           parsers - gt   render           -When the value has to be modified           parsers view value  -- does view needs to be changed   - gt   render                                                                                  setViewValue changedViewValue                                                         -- lt ------- lt --------- lt -------- lt ------       When changing ngModel where the directive does not stand          - When the value does not has to be modified            - formatters model value -- gt -- view value        -When the value has to be changed          - formatters model vale -- gt -- does the value has to be modified  --  when loop  parsers loop is finished  return modified value -- gt view value                                                                                        setViewValue notChangedValue  giving back the non changed value allows the  parsers handle the  bad  value                                                                     and avoids it to think the value did not changed                   Changed the model  lt ---- the above  parsers loop occurs

User · Answer

I ended up creating a modified directive of the above code to accept input and change the format on the fly       directive  numericOnly   function  filter      return         require   ngModel         link  function scope  element  attrs  modelCtrl                element bind  keyup   function  inputValue  e                 var strinput   modelCtrl   rawModelValue                 filter user input              var transformedInput   strinput   strinput replace      d -  g       null                 remove trailing 0              if transformedInput charAt 0   lt    0                   transformedInput   null                 modelCtrl  setViewValue transformedInput                  modelCtrl  render                  else                 var decimalSplit   transformedInput split                     var intPart   decimalSplit 0                  var decPart   decimalSplit 1                    remove previously formated number                intPart   intPart replace    g                        split whole number into array of 3 digits                if intPart length  gt  3                    var intDiv   Math floor intPart length   3                    var strfraction                        var i   intDiv                       j   3                    while intDiv  gt  0                      strfraction intDiv    intPart slice intPart length-j intPart length -  j - 3                       j j 3                     intDiv--                                      var k   j-3                   if  intPart length-k   gt  0                      strfraction 0    intPart slice 0 intPart length-k                                                        join arrays                if strfraction    undefined   return                    var currencyformat   strfraction join                          check for leading comma                  if currencyformat charAt 0                            currencyformat   currencyformat slice 1                                        if decPart     undefined                      modelCtrl  setViewValue currencyformat                      modelCtrl  render                       return                    else                     currencyformat   currencyformat         decPart slice 0 2                      modelCtrl  setViewValue currencyformat                      modelCtrl  render

User · Answer

you may also want to remove the 0 at the beginning of the input    I simply add an if block to Mordred answer above because I cannot make a comment yet        app directive  numericOnly   function         return         require   ngModel         link  function scope  element  attrs  modelCtrl               modelCtrl  parsers push function  inputValue                  var transformedInput   inputValue   inputValue replace     d -  g       null                 if  transformedInput  inputValue                      modelCtrl  setViewValue transformedInput                     modelCtrl  render                                    clear beginning 0               if transformedInput    0                   modelCtrl  setViewValue null                   modelCtrl  render                                  return transformedInput

User · Answer

lt input type  text  name  profileChildCount  id  profileChildCount  ng-model  profile ChildCount  numeric-only maxlength  1    gt    you can use numeric-only attribute

User · Answer

Easy way  use type  number  if it works for your use case    lt input type  number  ng-model  myText  name  inputName  gt    Another easy way  ng-pattern can also be used to define a regex that will limit what is allowed in the field   See also the  cookbook  page about forms   Hackish  way   watch the ng-model in your controller    lt input type  text   ng-model  myText  name  inputName  gt    Controller    scope  watch  myText   function           put numbersOnly   logic here  e g      if   scope myText      regex to look for                  strip out the non-numbers           Best way  use a  parser in a directive  I m not going to repeat the already good answer provided by  pkozlowski opensource  so here s the link  https   stackoverflow com a 14425022 215945  All of the above solutions involve using ng-model  which make finding this unnecessary   Using ng-change will cause problems   See AngularJS - reset of  scope value doesn  39 t change value in template  random behavior

User · Answer

There are a few ways to do this    You could use type  number     lt input type  number    gt    Alternatively - I created a reuseable directive for this that uses a regular expression    Html   lt div ng-app  myawesomeapp  gt      test   lt input restrict-input    0-9-     maxlength  20  type  text  class  test    gt   lt  div gt    Javascript    function        var app   angular module  myawesomeapp           directive  restrictInput    function             return               restrict   A               link  function  scope  element  attrs                    var ele   element 0                   var regex   RegExp attrs restrictInput                   var value   ele value                   ele addEventListener  keyup  function e                       if  regex test ele value                            value   ele value                       else                          ele value   value

User · Answer

Try this    lt input ng-keypress  validation  event   gt    function validation event        var theEvent   event    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

User · Answer

lt input type  text  ng-model  employee age  valid-input input-pattern    0-9    placeholder  Enter an age    gt    lt script gt  var app   angular module  app         app controller  dataCtrl   function  scope         app directive  validInput   function       return       require    ngModel       scope           inputPattern                  link  function scope  element  attrs  ngModelCtrl           var regexp   null         if  scope inputPattern     undefined            regexp   new RegExp scope inputPattern   g                   if  ngModelCtrl            return                 ngModelCtrl  parsers push function val            if  regexp              var clean   val replace regexp                 if  val     clean                ngModelCtrl  setViewValue clean               ngModelCtrl  render                          return clean                    else             return val                              element bind  keypress   function event            if event keyCode     32              event preventDefault                                    lt  script gt

User · Answer

Here s my implementation of the  parser solution that  Mark Rajcok recommends as the best method  It s essentially  pkozlowski opensource s excellent  parser for text answer but rewritten to only allow numerics  All credit goes to him  this is just to save you the 5 minutes of reading that answer and then rewriting your own   app directive  numericOnly   function        return           require   ngModel           link  function scope  element  attrs  modelCtrl                 modelCtrl  parsers push function  inputValue                    var transformedInput   inputValue   inputValue replace     d -  g       null                   if  transformedInput  inputValue                        modelCtrl  setViewValue transformedInput                       modelCtrl  render                                       return transformedInput                                         And you d use it like this    lt input type  text  name  number  ng-model  num things  numeric-only gt    Interestingly  spaces never reach the parser unless surrounded by an alphanumeric  so you d have to  trim   as needed  Also  this parser does NOT work on  lt input type  number  gt   For some reason  non-numerics never make it to the parser where they d be removed  but they do make it into the input control itself

User · Answer

SOLUTION  I make a directive for all inputs  number  text  or any  in the app  so you can input a value and change the event  Make for angular 6   import   Directive  ElementRef  HostListener  Input   from   angular core      Directive      tslint disable-next-line directive-selector selector   input inputType        export class InputTypeDirective    constructor private  el  ElementRef        Input   inputType  string      tipos  number  letter  cuit  tel   HostListener  input      event    onInputChange event    if   event data      return     switch  this inputType      case  number         const initalValue   this  el nativeElement value      this  el nativeElement value   initalValue replace    0-9   g           if  initalValue     this  el nativeElement value          event stopPropagation               break                     case  text             const result   event data match    a-zA-Z        g           if  result 0                       const initalValue   this  el nativeElement value             this  el nativeElement value   initalValue replace               a-zA-Z        g                                       event stopPropagation                      break                case  tel             case  cuit              const initalValue   this  el nativeElement value        this  el nativeElement value   initalValue replace    0-9-   g              if  initalValue     this  el nativeElement value             event stopPropagation                                    HTML        lt input matInput inputType  number   formControlName   field name   maxlength   field length   placeholder   field label   translate   type  text  class  filter-input  gt

User · Answer

Using ng-pattern on the text field    lt input type  text   ng-model  myText  name  inputName  ng-pattern  onlyNumbers  gt    Then include this on your controller   scope onlyNumbers      d

User · Answer

I know this is old  but I ve created a directive for this purpose in case anyone is looking for an easy solution  Very simple to use   You can check it out here

User · Answer

All the above solutions are quite large  i wanted to give my 2 cents on this   I am only checking if the value inputed is a number or not  and checking if it s not blank  that s all   Here is the html    lt input type  text  ng-keypress  CheckNumber     gt    Here is the JS    scope CheckKey   function          if  isNaN event key     event key            event key                   event returnValue                  It s quite simple   I belive this wont work on Paste tho  just so it s known   For Paste  i think you would need to use the onChange event and parse the whole string  quite another beast the tamme  This is specific for typing   UPDATE for Paste  just add this JS function    scope CheckPaste   function          var paste   event clipboardData getData  text         if  isNaN paste             event preventDefault            return false             And the html input add the trigger    lt input type  text  ng-paste  CheckPaste     gt    I hope this helps o

User · Answer

Basic HTML   lt input type  number    gt    Basic bootstrap    lt input class  form-control  type  number  value  42  id  my-id  gt

[javascript] How do I restrict an input to only accept numbers?

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive