How to make type number to positive numbers only

Question

currently I have the following code   lt input type  number    gt    it comes out to something like this    The little selector things on the right allow the number to go into negative  How do I prevent that   I am having doubts about using type  number   it is causing more problems than it is solving  I am going to sanity check it anyways  so should I just go back to using type  text

User · Answer

Try this    Tested in Angular 8 values are positive This code also handels null and negitive values                   lt input                 type  number                  min  0                   input   funcCall    -- Optional                 oninput  value         value   0   value  lt  0   value   value   -1   false                  formControlName  RateQty                    value    some variable  -- Optional                 gt

User · Answer

With text type of input you can use this for a better validation   return  event keyCode   event keyCode    69   false   event keyCode  gt   48  amp  amp  event keyCode  lt   57     event charCode  gt   48  amp  amp  event charCode  lt   57    true   event preventDefault

User · Answer

Add a min attribute   x000D   x000D   lt input type  number  min  0  gt  x000D   x000D   x000D

User · Answer

I cannot find the perfect solution as some work for inputting but not for copy amp paste  some are the other way around  This solution works for me  It prevents from negative number  typing  e   copy amp paste  e  text   create a function    lt script language  JavaScript  gt        this prevents from typing non-number text  including  e     function isNumber evt        evt    evt    evt   window event      let charCode    evt which    evt which   evt keyCode      if   charCode  gt  31  amp  amp   charCode  lt  48    charCode  gt  57    amp  amp  charCode     46          evt preventDefault          else         return true             lt  script gt    add these properties to input  this two prevent from copy amp paste non-number text  including  e   you need to have both together to take effect    lt input type  number  oninput  validity valid   value       onpress  isNumber event     gt    If you are using Vue you can refer this answer here  I have extracted it to a mixin which can be reused

User · Answer

Other solution is to use Js to make it positive  min option can be disabled and is not valid when the user types smth  The negative if is not necessary and on  keydown   event can also be used   let  numberInput        whatEverId     numberInput on  change   function        let numberInputText    numberInput val        if numberInputText includes  -              numberInput val Math abs  numberInput val

User · Answer

You can turn negative input into a positive number by the following   x000D   x000D   lt input type  number  onkeyup  if this value lt 0  this value  this value   -1   gt  x000D   x000D   x000D

User · Answer

I have found another solution to prevent negative number    lt input type  number  name  test name  min  0  oninput  validity valid   value       gt

User · Answer

If you try to enter a negative number  the onkeyup event blocks this and if you use the arrow on the input number  the onblur event resolves that part    x000D   x000D   lt input type  number   x000D      onkeyup  if this value lt 0 this value 1  x000D      onblur  if this value lt 0 this value 1  x000D   gt  x000D   x000D   x000D

User · Answer

It depends on how precise you want to be  It you want to accept only integers  than    x000D   x000D   lt input type  number  min  1  step  1  gt  x000D   x000D   x000D    If you want floats with  for example  two digits after decimal point    x000D   x000D   lt input type  number  min  0 01  step  0 01  gt  x000D   x000D   x000D

User · Answer

You can use the following to make type  number  accept positive numbers only   input type  number  step  1  pattern   d

User · Answer

Try   lt input type  number  pattern    0-9   title  Only Number  min  1  step  1  gt

User · Answer

You can force the input to contain only positive integer by adding onkeypress within the input tag    x000D   x000D   lt input type  number  onkeypress  return event charCode  gt   48  min  1   gt  x000D   x000D   x000D    Here  event charCode  gt   48 ensures that only numbers greater than or equal to 0 are returned  while the min tag ensures that you can come to a minimum of 1 by scrolling within the input bar

User · Answer

Try this   Yii2   Validation rule       public function rules         return     location id    compare    compareValue    gt  0    operator    gt    gt

User · Answer

x000D   x000D   function           fn inputFilter   function  inputFilter        return this on  input keydown keyup mousedown mouseup select contextmenu drop   function            if  inputFilter this value             this oldValue   this value          this oldSelectionStart   this selectionStart          this oldSelectionEnd   this selectionEnd          else if  this hasOwnProperty  oldValue              this value   this oldValue            this setSelectionRange this oldSelectionStart  this oldSelectionEnd           else           this value                               jQuery        positive int   inputFilter function  value      return    d      d 0 2    test value       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt input type  number  class  positive int   gt  x000D   x000D   x000D   Above code works fine for all     And it will also prevent inserting more than 2 decimal points  And if you don t need this just remove d 0 2  or if need more limited decimal point just change number 2

User · Answer

x000D   x000D   lt input type  number  min  1  step  1  gt  x000D   x000D   x000D

User · Answer

add this code in your input type   onkeypress  return  event charCode    8    event charCode    0    event charCode    13    null   event charCode  gt   48  amp  amp  event charCode  lt   57    for example    lt input type  text  name  age  onkeypress  return  event charCode    8    event charCode    0    event charCode    13    null   event charCode  gt   48  amp  amp  event charCode  lt   57    gt

User · Answer

If needing text input  the pattern works also   lt input type  text  pattern   d   gt

User · Answer

It depends on whether you want an int or float field  Here s what the two would look like    lt input type  number  name  int-field  id  int-field  placeholder  positive int  min  1  step  1  gt   lt input type  number  name  float-field  id  float-field  placeholder  positive float  min  0  gt    The int field has the correct validation attached to it  since its min is 1  The float field accepts 0  however  to deal with this  you can add one more constraint validator   function checkIsPositive e      const value   parseFloat e target value     if  e target value           value  gt  0        e target setCustomValidity          else       e target setCustomValidity  Please select a value that is greater than 0            document getElementById  float-field   addEventListener  input   checkIsPositive  false     JSFiddle here   Note that none of these solutions completely prevent the user from trying to type in invalid input  but you can call checkValidity or reportValidity to figure out whether the user has typed in valid input   Of course  you should still have server-side validation because the user can always ignore client-side validation

[html] How to make type="number" to positive numbers only

Examples related to html