müssen nur Zahlen im Eingabefeld akzeptieren

Question

Ich benutze Nummer Typ hier, so dass es nur Zahl akzeptiert. Aber ich möchte nicht, dass dieser Zahl Typ, wie es gibt Inkremente und dekrementiert Selektor auf der rechten Seite des Feldes ich brauche, muss ich nur Zahlen nicht irgendwelche Charaktere annehmen. Wie kann ich das tun?

das sind meine Formularelemente:

<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/> 

Answer 1

Sie regular expressions in Javascript verwenden können, um zu überprüfen, ob bestimmte Anzahl gültig ist oder nicht.

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

Answer 2

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/

Answer 3

Diese Art von Aufgaben ist, wo wirklich reagieren scheint. Verwenden Sie einfach <input> s mit type="text" und lassen Sie Ihre onChange Handler die Arbeit machen. Ich würde vorschlagen, String.replace mit \D (keine Ziffer) regexp, um unerwünschte Zeichen herauszufiltern, und dann String.substr, um die Länge des eingegebenen Wertes zu steuern. Etwas wie:

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> 
    ); 
    } 
}