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

需要只接受输入字段中的数字

3 个答案: