只需要接受輸入字段中的數字

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

您可以使用regular expressions在JavaScript來檢查給定數是否有效。

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（非數字）regexp過濾掉不需要的字符，然後使用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> 
    ); 
    } 
}