CODEWITHSUNDEEP
javascripthtmlreactjs
Abhilash Muttalli
Abhilash Muttalli

Reputation: 1369

need to accept only numbers in the input field

i am using number type here so that it accepts only number.But i don't want this number type like it's gives increments and decrements selector at the right side of the field.What i need is i need to accept only numbers not any characters.How can i do that?

these are my form elements:

 <label className="w3-label w3-text-blue w3-large">
                 Phone Number:
                 <input type="number" className="w3-input w3-border" value={this.state.phoneno}
                 onChange={e => this.setState({ phoneno: e.target.value })} required placeholder="Enter Father's Phone No. in Numbers"/>
               </label><br/>
                <label className="w3-label w3-text-blue w3-large">
                 Mobile Number:
                 <input type="number" className="w3-input w3-border" value={this.state.mobileno} pattern="[0-9]{10}" title="Please enter 10 digit mobile Number"
                 onChange={e => this.setState({ mobileno: e.target.value })} required placeholder="Enter Father's Mobile No. in Numbers"/>
               </label></div><br/>

Upvotes: 1

Views: 265

Answers (3)

fkulikov
fkulikov

Reputation: 3199

This kind of tasks is where React really shines. Just use <input>s with type="text" and let your onChange handlers do the job. I would suggest using String.replace with \D (not a digit) regexp to filter out unwanted chars, and then String.substr to control the length of the entered value. Something like:

const filterNonDigits = value => value ? value.replace(/\D+/, '') : '';
const takeLast = (amount, value) => value ? value.substr(0, amount) : '';

class NumbersInput extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  handlePhone(value) {
    this.setState({ phoneno: filterNonDigits(value) });
  }

  handleMobile(value) {
    this.setState({ mobileno: takeLast(10, filterNonDigits(value)) });
  }

  render() {
    return (
      <div>
        <label>
          Phone Number:
          <input
            value={this.state.phoneno}
            onChange={e => this.handlePhone(e.target.value)}
          />
        </label>
        <br/>
        <label>
          Mobile Number:
          <input 
            value={this.state.mobileno} 
            onChange={e => this.handleMobile(e.target.value)}
          />
        </label>
      </div>
    );
  }
}

Upvotes: 0

Cristian Penarrieta
Cristian Penarrieta

Reputation: 331

Try this

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

Upvotes: 4

shyamm
shyamm

Reputation: 560

You can use regular expressions in javascript to check whether given number is valid or not.

function phonenumber(inputtxt)
{
  var phoneno = /^\d{10}$/;
  if((inputtxt.value.match(phoneno))
        {
      return true;
        }
      else
        {
        alert("message");
        return false;
        }
}

Upvotes: 0

Related Questions