は、入力フィールドの数字だけを受け入れる必要があります

Question

ここで数値タイプを使用していますので、数字だけを受け入れるようにしています。しかし、この数字タイプは、フィールドの右側に増分および減分セレクタを付けるようなものではありません。私は必要なのは数字だけを受け入れる必要があるということです。どうすればいいですか？

これらは私のフォーム要素です：

<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

あなたが与えられた番号が有効であるかどうかをチェックするためにJavaScriptでregular expressionsを使用することができます。

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

Answer 2

リアクトが本領を発揮するタスクのこの種は、この

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

を試してみてください。 <input>とtype="text"を使用して、onChangeハンドラを実行させてください。 String.replaceを\D（数字ではありません）正規表現を使用して不要な文字を除外し、次にString.substrを使用して入力値の長さを制御することをお勧めします。次のようなもの：

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