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

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

嘗試這個

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 2

您可以在javascript中使用regular expressions來檢查給定的數字是否有效。

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

Answer 3

這類任務正是React真正發揮作用的地方。 只需將<input> s與type="text"並讓您的onChange處理type="text"完成這項工作。 我建議將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>
    );
  }
}