Only numbers Input number in React

Question

I m trying to exclude minus and plus from input  but it s going wrong   handleChange event      const value   event target value replace     - ig         this setState  financialGoal  value        Render input code    lt input style   width   150px    type  number  value  this state financialGoal  onChange  this handleChange   gt

User · Answer

Here is a solution with onBlur  it can be very helpful as it also allows you to format the number the way you need it without requiring any black magic or external library  2020 React Hooks const toNumber    value  string   number    gt        if  typeof value      number   return value     return parseInt value replace     d   g          const formatPrice    price  string   number    gt      return new Intl NumberFormat  es-PY   format toNumber price       lt input     defaultValue  formatPrice price       onBlur  e   gt          const numberValue   toNumber e target value        setPrice numberValue        e target value   formatPrice numberValue             type  tel      required   gt   How it works   Set initial value via defaultValue Allow user to freely type anything they feel onBlur  once the input looses focus    replace any character that is not a digit with an empty string setState   or dispatch   to manage state set the value of the input field to the numeric value and apply optional formatting    Pay attention  In case your value come from a async source  e g  fetch   Since defaultValue will only set the value on the first render  you need to make sure to render the component only once the data is there

User · Answer

To stop typing  use onKeyPress not onChange    Using event preventDefault   inside onKeyPress means STOP the pressing event   Since keyPress handler is triggered before onChange  you have to check the pressed key  event keyCode   NOT the current value of input  event target value   onKeyPress event      const keyCode   event keyCode    event which    const keyValue   String fromCharCode keyCode     if      -  test keyValue       event preventDefault         Demo below    x000D   x000D  const  Component    React   x000D   x000D  class Input extends Component   x000D     x000D   x000D    onKeyPress event    x000D     const keyCode   event keyCode    event which  x000D     const keyValue   String fromCharCode keyCode   x000D      if      -  test keyValue   x000D        event preventDefault    x000D      x000D    render     x000D     x000D     return   x000D      lt input style   width   150px    type  number  onKeyPress  this onKeyPress bind this     gt  x000D   x000D       x000D      x000D    x000D    x000D   x000D  ReactDOM render  lt Input   gt    document querySelector   app     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt section id  app  gt  lt  section gt  x000D   x000D   x000D

User · Answer

Set class on your input field       digitsOnly   on  keypress  function  event        var keynum     if window event      IE8 and earlier        keynum   event keyCode        else if event which       IE9 Firefox Chrome Opera Safari        keynum   event which        else          keynum   0             if keynum     8    keynum     0    keynum     9            return            if keynum  lt  46    keynum  gt  57    keynum     47            event preventDefault             prevent all special characters except decimal point     Restrict paste and drag-drop on your input field       digitsOnly   on  paste drop  function  event        let temp        if event type    drop             temp      financialGoal   val   event originalEvent dataTransfer getData  text            var regex   new RegExp    100   0 1 2          1-9   0-9    0     0-9  1 2      g     Allows only digits to be drag and dropped         if   regex test temp                event preventDefault               return false                  else if event type    paste             temp     financialGoal   val   event originalEvent clipboardData getData  Text           var regex   new RegExp    100   0 1 2          1-9   0-9    0     0-9  1 2      g     Allows only digits to be pasted         if   regex test temp                event preventDefault               return false                      Call these events in componentDidMount   to apply the class as soon as the page loads

User · Answer

After reading all the answers but none really working for numbers only with copy and paste I came up with this solution     parseInt solution  fails as parseInt  2a   is valid   onKeyup sulution  fails on copy and paste  backspace  key which solution  will probably fail on copy and paste  type  number  solution  fails on long numbers as javascript converts 40817810000000023511 into 40817810000000023500 because it is 53 bit language    lt input     name  address line1      value  values address line1      onChange   event  any    gt          if  isFinite event target value              UPDATE YOUR STATE  i am using formik        setFieldValue  address line1   event target value                gt

User · Answer

Define an input with an onChange   method like below  in my case  childState contains the state  passed down to this child component     lt input           value  this props childState volume            onChange   e    gt  handleChangeInteger e   volume  e target value      gt    One approach I used was to install validatorJS  npm install validator --save   I then defined a function handleChangeInteger  which takes an object that will be used to change your state  in this case   volume  e target value   Note  I needed the OR condition to allow my input to be blank  otherwise it would not let the user backspace  delete  the last integer if they wanted the field blank    const handleChangeInteger    e  obj to return    gt      if  validator isInt e target value     e target value              this props childSetState obj to return          The user will now not be allowed to type anything other than backspace  0-9  or e  this is a number    in the input field   I referenced this post to create my solution  https   stackoverflow com a 45676912 6169225

User · Answer

2019 Answer Late  but hope it helps somebody     This will make sure you won t get null on an empty textfield    Textfield value is always 0 When backspacing  you will end with 0 When value is 0 and you start typing  0 will be replaced with the actual number      This will make sure that value never is null when textfield is empty  const minimum   0      export default  props    gt        const  count  changeCount    useState minimum        function validate count            return parseInt count    minimum            function handleChangeCount count            changeCount validate count              return            lt Form gt               lt FormGroup gt                   lt TextInput                     type  text                      value  validate count                       onChange  handleChangeCount                    gt               lt  FormGroup gt               lt ActionGroup gt                   lt Button type  submit  gt submit form lt  Button gt               lt  ActionGroup gt           lt  Form gt

User · Answer

Maybe  it will be helpful for someone  Recently I used this solution for my App  I am not sure that is a correct solution but it works fine   this state         inputValue          isInputNotValid  false    handleInputValue    evt    gt        this validationField evt   isInputNotValid    inputValue       validationField    evt  isFieldNotValid  fieldValue     gt       if  evt target value  amp  amp   isNaN evt target value             this setState                 isFieldNotValid   false               fieldValue   evt target value                    else           this setState                 isFieldNotValid   true               fieldValue                             lt input className  this state isInputNotValid    error    null  type  text  onChange  this handleInputValue    gt    The main idea  that state won t update till the condition isn t true and value will be empty   Don t need to use onKeyPress  Down etc    also if you use these methods they aren t working on touch devices

User · Answer

lt input         className  quot input-Flied2 quot          type  quot TEXT quot          name  quot userMobileNo quot          placeholder  quot Moble No quot          value  phonNumber          maxLength  quot 10 quot          onChange  handleChangeInput          required         gt     const handleChangeInput    e    gt    const re      0-9 b        rules if  e target value      quot  quot     re test e target value       setPhoneNumber e target value

User · Answer

The most effective and simple solution I found    lt input     type  number      name  phone      placeholder  Phone number      onKeyDown  e   gt       -        test e key   amp  amp  e preventDefault      gt

User · Answer

I tried to mimic your code and noticed that there s an issue on React with  lt input type  number    gt   For workaround  check this example and try it yourself  https   codepen io zvona pen WjpKJX editors 0010  You need to define it as normal input  type  text   with pattern for numbers only        lt input type  text  pattern   0-9         onInput  this handleChange bind this   value  this state financialGoal    gt    And then to compare the validity of input   const financialGoal    evt target validity valid       evt target value   this state financialGoal    The biggest caveat on this approach is when it comes to mobile --  where keyboard isn t in numeric but in normal alphabetic format

User · Answer

Simply way in React  lt input       onKeyPress   event    gt            if     0-9   test event key               event preventDefault                             gt

User · Answer

If you want to maintain input type  number   probably for mobile devices to trigger the numeric keyboard  you should use onInput instead of onChange to capture your event changes   Using onInput fixed a bug where typing text into a number input would bypass the validation I had assigned to it in onChange  Once I fixed this function to be called in onInput it triggered in all instances   Here s an example of what I m doing    lt input     type  number      id   player  index Score       className  form-control      pattern   0-9  0 5       onInput   event    gt  this enterScore event  index       value  this props scoreLabel this state scores index      gt    I hope this helps   EDIT - 08-03-2018   I came up with a better solution  Use type  tel  along with a pattern regex within the input component itself   The nuts and bolts of how I wired this up is here   class Input extends React Component     state    message   3       updateNumber    e    gt        const val   e target value         If the current value passes the validity test then apply that to state     if  e target validity valid  this setState  message  e target value           If the current val is just the negation sign  or it s been provided an empty string         then apply that value to state - we still have to validate this input before processing        it to some other component or data structure  but it frees up our input the way a user        would expect to interact with this component     else if  val           val      -   this setState  message  val           render         return          lt input         type  tel          value  this state message          onChange  this updateNumber          pattern   -  0-9  d     d            gt                ReactDOM render  lt Input   gt   document getElementById  main       I have an example of this working on Codepen here

User · Answer

one line of code   lt input value  this state financialGoal  onChange  event   gt  this setState  financialGoal  event target value replace   D          gt

User · Answer

Here s my solution of plain Javascript Attach a keyup event to the input field of your choice - id in this example  In the event-handler function just test the key of event key with the given regex  In this case if it doesn t match we prevent the default action of the element - so a  quot wrong quot  key-press within the input box won t be registered thus it will never appear in the input box    let idField   document getElementById  id       idField addEventListener  keypress   function event        if       0-9   g test event key           event preventDefault                 The benefit of this solution may be its flexible nature and by changing and or logically chaining regular expression s  can fit many requirements  E g  the regex    a-z0-9-    g should match only lowercase English alphanumeric characters with no spaces and only - and   allowed   Note  that if you use   a-z  gi  note the i at the end  will ignore letter case and will still accept capital letters

User · Answer

Solution  Today I find use parseInt   is also a good and clean practice  A onChange e  example is below   Code  onChange e       this setState   e target id   parseInt e target value    parseInt e target value             Explanation   parseInt   would return NaN if the parameter is not a number  parseInt  12a   would return 12

User · Answer

You can try this solution  since onkeypress will be attached directly to the DOM element and will prevent users from entering invalid data to begin with  So no side-effects on react side   lt input type  quot text quot  onKeyPress  onNumberOnlyChange   gt   const onNumberOnlyChange    event  any    gt        const keyCode   event keyCode    event which      const keyValue   String fromCharCode keyCode       const isValid   new RegExp  quot  0-9  quot   test keyValue       if   isValid           event preventDefault           return

[javascript] Only numbers. Input number in React

2020 React Hooks

How it works:

Examples related to javascript

Examples related to regex

Examples related to reactjs