Is there any way to prevent input type number getting negative values

Question

I want to get only positive values  is there any way to prevent it using only html Please don t suggest validation method

User · Answer

The answer to this is not helpful  as its only works when you use up down keys  but if you type -11 it will not work  So here is a small fix that I use   this one for integers        integer   live  keypress keyup   function  event              console log  int       this  val           this  val   this  val   replace     d                if  event which    8  amp  amp   event which  lt  48    event which  gt  57                 event preventDefault                   this one when you have numbers of price              numeric   price   live  keypress keyup   function  event               console log  numeric       this  val           this  val   this  val   replace    0-9      g             if  event which    8  amp  amp   event which    44      this  val   indexOf         -1   amp  amp   event which  lt  48    event which  gt  57             event preventDefault

User · Answer

Use the min attribute like this    lt input type  number  min  0  gt

User · Answer

This solution allows all keyboard functionality including copy paste with keyboard  It prevents pasting of negative numbers with the mouse  It works with all browsers and the demo on codepen uses bootstrap and jQuery  This should work with non english language settings and keyboards  If the browser doesn t support the paste event capture  IE   it will remove the negative sign after focus out  This solution behaves as the native browser should with min 0 type number   Markup    lt form gt     lt input class  form-control positive-numeric-only  id  id-blah1  min  0  name  nm1  type  number  value  0    gt     lt input class  form-control positive-numeric-only  id  id-blah2  min  0  name  nm2  type  number  value  0    gt   lt  form gt    Javascript    document  ready function          input positive-numeric-only   on  keydown   function e        var char   e originalEvent key replace    0-9                 if  char length    0  amp  amp    e originalEvent ctrlKey    e originalEvent metaKey           e preventDefault                      input positive-numeric-only   bind  paste   function e        var numbers   e originalEvent clipboardData        getData  text          replace    0-9      g           e preventDefault        var the val   parseFloat numbers       if  the val  gt  0            this  val the val toFixed 2                      input positive-numeric-only   focusout function e        if   isNaN this value   amp  amp  this value length    0          this value   Math abs parseFloat this value   toFixed 2         else         this value   0

User · Answer

x000D   x000D  If Number is Negative or Positive Using ES6   s Math Sign x000D   x000D  const num   -8  x000D     Old Way x000D  num     0   num    num  gt  0   1   -1      -1 x000D   x000D     ES6 Way x000D  Math sign num      -1 x000D   x000D   x000D

User · Answer

oninput  this value  this value    lt  Number this min     this value    gt  Number this max           this value

User · Answer

Easy method    x000D   x000D   lt input min  0  type  number  onkeypress  return  event charCode    8    event charCode    0    null   event charCode  gt   48  amp  amp  event charCode  lt   57  gt  x000D   x000D   x000D

User · Answer

x000D   x000D   lt input type  number  name  credit days  pattern     -     x000D       credit days  ngModel  class  form-control   x000D      placeholder      Enter credit days    translate     min  0   x000D        ngModel    provider credit days  x000D      onkeypress  return  event charCode    8    event charCode    0     x000D      event charCode    13    null   event charCode  gt   48  amp  amp  event charCode  lt    x000D      57  onpaste  return false  gt  x000D   x000D   x000D

User · Answer

For me the solution was   x000D   x000D   lt input type  number  min  0  oninput  this value   Math abs this value   gt  x000D   x000D   x000D   Edit As suggested on the comments with a minor change to work if 0 is the min value   x000D   x000D   lt input type  number  min  0  oninput  this value       this value  amp  amp  Math abs this value   gt   0   Math abs this value    null  gt  x000D   x000D   x000D

User · Answer

Here is a solution that worked best of me for a QTY field that only allows numbers       Only allow numbers  backspace and left right direction on QTY input     if    e keyCode  gt  95  amp  amp  e keyCode  lt  106     numpad numbers             e keyCode  gt  47  amp  amp  e keyCode  lt  58     numbers             8  9  35  36  37  39  indexOf e keyCode   gt   0    backspace  tab  home  end  left arrow  right arrow             e keyCode    65  amp  amp   e ctrlKey     true    e metaKey     true      Ctrl Cmd   A             e keyCode    67  amp  amp   e ctrlKey     true    e metaKey     true      Ctrl Cmd   C             e keyCode    88  amp  amp   e ctrlKey     true    e metaKey     true      Ctrl Cmd   X             e keyCode    86  amp  amp   e ctrlKey     true    e metaKey     true      Ctrl Cmd   V                  return false

User · Answer

Just adding another way of doing this  using Angular  if you don t wanna dirt the HTML with even more code   You only have to subscribe to the field valueChanges and set the Value as an absolute value  taking care of not emitting a new event because that will cause another valueChange hence a recursive call and trigger a Maximum call size exceeded error   HTML CODE   lt form  formGroup   myForm  gt       lt input type  number  formControlName  myInput   gt   lt  form gt    TypeScript CODE  Inside your Component   formGroup  FormGroup   ngOnInit          this myInput valueChanges       subscribe      gt            this myInput setValue Math abs this myInput value    emitEvent  false               get myInput    AbstractControl       return this myForm controls  myInput

User · Answer

Here s an angular 2 solution   create a class OnlyNumber  import  Directive  ElementRef  HostListener  from   angular core     Directive     selector    OnlyNumber      export class OnlyNumber         Allow decimal numbers  The    is only allowed once to occur   private regex  RegExp   new RegExp    0-9      0-9    0 1   g         Allow key codes for special events  Reflect        Backspace  tab  end  home   private specialKeys  Array lt string gt      Backspace    Tab    End    Home       constructor private el  ElementRef            HostListener  keydown      event      onKeyDown event  KeyboardEvent           Allow Backspace  tab  end  and home keys     if  this specialKeys indexOf event key      -1          return                Do not use event keycode this is deprecated         See  https   developer mozilla org en-US docs Web API KeyboardEvent keyCode     let current  string   this el nativeElement value         We need this because the current value on the DOM element        is not yet updated with the value from this event     let next  string   current concat event key       if  next  amp  amp   String next  match this regex           event preventDefault                  add OnlyNumber to declarations in app module ts and use like it like this anywhere in your app   lt input OnlyNumber  true  gt

User · Answer

This code is working fine for me  Can you please check    lt input type  number  name  test  min  0  oninput  validity valid   value       gt

User · Answer

The  Manwal answer is good  but i like code with less lines of code for better readability  Also i like to use onclick onkeypress usage in html instead   My suggested solution does the same  Add   min  0  onkeypress  return isNumberKey event     to the html input and  function isNumberKey evt       var charCode    evt which    evt which   event keyCode      return   charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57        as a javascript function   As said  it does the same  It s just personal preference on how to solve the problem

User · Answer

Just for reference  with jQuery you can overwrite negative values on focusout with the following code     document  ready function           body   delegate   myInputNumber    focusout   function            if   this  val    lt  0                 this  val  0                            This does not replace server side validation

User · Answer

I was not satisfied with  Abhrabm answer because      It was only preventing negative numbers from being entered from   up down arrows  whereas user can type negative number from keyboard    Solution is to prevent with key code    x000D   x000D     Select your input element  x000D  var number   document getElementById  number    x000D   x000D     Listen for input event on numInput  x000D  number onkeydown   function e    x000D      if    e keyCode  gt  95  amp  amp  e keyCode  lt  106  x000D            e keyCode  gt  47  amp  amp  e keyCode  lt  58   x000D           e keyCode    8     x000D          return false  x000D        x000D    x000D   lt form action    method  post  gt  x000D     lt input type  number  id  number  min  0    gt  x000D     lt input type  submit  value  Click me    gt  x000D   lt  form gt  x000D   x000D   x000D    Clarification provided by  Hugh Guiney   What key codes are being checked     95   lt  106 corresponds to Numpad 0 through 9  47   lt  58 corresponds to 0 through 9 on the Number Row  and 8 is Backspace       So this script is preventing invalid key from being entered in input

User · Answer

I wanted to allow decimal numbers and not clear the entire input if a negative was inputted  This works well in chrome at least    lt input type  number  min  0  onkeypress  return event charCode    45  gt

User · Answer

Restrict the charcter  -   amp   e  in type Number  lt input type  quot number quot  onkeydown  quot return event keyCode     69  amp  amp  event keyCode     189 quot    gt   Demo  https   stackblitz com edit typescript-cwc9ge file index ts

[html] Is there any way to prevent input type="number" getting negative values?

Examples related to html

Examples related to input

Examples related to numbers