Как принять только номер для телефона в ответ

Question

Я думаю, что это глупый вопрос, но поверьте мне, я новичок, чтобы реагировать Я работаю над формой, в которой я использую <input type="number"/>, здесь я достигаю числовой цели (я имею в виду, что она просто примет число), но я хочу наложить некоторые ограничения на то, что пользователь не сможет ввести более 8 символов. Я хочу принять только номер и лимит 8, не могли бы вы мне помочь?

Answer 1

Просто добавьте шаблон и атрибут maxlength.

<input type="text" pattern="\d*" maxlength="8"/>

Если вы хотите использовать только номер, используйте следующее:

<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==8) return false;" />

Answer 2

Проверьте длину символов, если они меньше, чем установленное предельное состояние, если больше, не устанавливайте состояние.

handleInput = e => {
  e.persist();

  this.setState(prevState => {
    return {
      input: e.target.value.length < 9 ? e.target.value : prevState.input
    };
  });
};

class App extends React.Component {
  state = {
    input: ""
  };

  handleInput = e => {
    e.persist();

    this.setState(prevState => {
      return {
        input: e.target.value.length < 9 ? e.target.value : prevState.input
      };
    });
  };

  render() {
    return (
      <div>
        <input
          value={this.state.input}
          type="number"
          onChange={this.handleInput}
        />
        <p>typed: {this.state.input}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance:textfield;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />

Answer 3

Предполагая, что вы используете управляемый ввод, вот как вы можете это сделать.

Мы будем использовать replace с регулярным выражением, которое допускает только цифры. Если вам не нужна поддержка IE, вы можете пропустить это и просто положиться на type="number".

Тогда мы будем использовать slice с начальной позицией 0 и концом 8, так как вы хотите ограничить до 8 цифр. Если вам нужно что-то отличное от 8, просто измените это число.

class Example extends React.Component {
  state = {
    value: ''
  }
   
  onChange = e => {
    // Separated into 3 steps for clarity
    let onlyNumbers = e.target.value.replace(/[^\d]/g, '');
    let limitToEight = onlyNumbers.slice(0, 8);

    this.setState({ value: limitToEight });

    // In one line:
    // this.setState({ value: e.target.value.replace(/[^\d]/g, '').slice(0, 8) })
  }
  
  render() {
    return <input type='number' value={this.state.value} onChange={this.onChange} />
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" />