Reputation: 1369
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
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
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
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