restrict input type="text" only to numbers and show default first 3 numbers in input box in react js

Question

I am using an input type text and i want to restrict the input box to only numbers and first 3 numbers of input box are default numbers like 750

I tried regex but its not working

Here is my HTML Code:

<input custom="full-width" autoComplete="off" placeholder="optional" type="text"  value={DFAmngt['item']} name="DFAmngt" pattern="[0-9]*" onChange={this.searchPartSuggestions.bind(this)} required  disabled={statusCancelled}/> &nbsp;

JS Code:

    let { name, value } = e.target;
      let { masterData, masterDataReducer } = this.props;
      console.log(masterData,masterDataReducer);
      let { DFAmngt } = masterDataReducer;
      console.log(DFAmngt);
      const re = /^[0-9\b]+$/;
      if (value === '' || re.test(value)) {
        DFAmngt['item'] = value;
        // DFMMannualIssue[name+"Error"]='';
        console.log(DFAmngt['item']);
      }

      masterData[name] = value;
      if(name === 'DFAmngt'){masterDataReducer[name]['item'] = value;}else{masterDataReducer[name] = value; }
      // this.props.updateMasterData(masterData,"masterData");
      this.props.updateMasterReducer(masterDataReducer);
      this.props.partSuggestions(value,name);
  }

Why don't you use the type "number" and the min/max/step attributes? — Casimir et Hippolyte, Aug 20 '19 at 04:24
Note that putting a word boundary in a character class doesn't make sense since it isn't a character (it is interpreted as a backspace). — Casimir et Hippolyte, Aug 20 '19 at 04:37
@CasimiretHippolyte I tried using type number but it is allowing 'e' letter , '+' and '-" — SATYA, Aug 20 '19 at 04:44
`` [Reference](https://stackoverflow.com/questions/19233415/how-to-make-type-number-to-positive-numbers-only) — tarzen chugh, Aug 20 '19 at 05:09
@tarzenchugh i tried with ur code , still it is accepting alaphabet e ,- and + — SATYA, Aug 20 '19 at 09:30

score 0 · Accepted Answer · answered Aug 20 '19 at 09:50

0

This solution doesn't allow negative numbers, e, +, - etc. Reference

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

answered Aug 20 '19 at 09:50

tarzen chugh

10,561
4
20
30

restrict input type="text" only to numbers and show default first 3 numbers in input box in react js

1 Answers1