разрешены только числа до определенной длины в материале

Question

Нам нужно, чтобы пользователь вводил только цифры, и он должен иметь максимальную длину, скажем, 3. Как мы можем сделать это в пользовательском интерфейсе материала?

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  defaultValue={score}
/>

Нам нужны здесь только числовые значения

Answer 1

Попробуйте это ...

<TextField
  id="score"
  label="score"
  name="totalScore"
  style={style.filedStyle}
  inputProps={{ min: 3, max: 3}}
/>

Answer 2

На самом деле это так, у вас есть тип ввода number.Таким образом, вы можете применить атрибут max, но он будет проверять, не ограничивать входные числа. Оформить заказ thread .

Обходной путь - применить oninput и подсчитать длину.как это

 onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,3)

Таким образом, ваш текстовый ввод будет выглядеть так:

<TextField type="number"
    className="text-field-amount"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
    min={0}
/>

Демо

Answer 3

Использовать управляемый ввод и обновлять состояние только в том случае, если ввод является числом.

Пример: состояние будет таким:

this.state={
    score: 0
}

создать функцию для обработки изменений в текстовом поле.

handleChange(e){
    //update state here with value from TextField.
}

и ваше текстовое поле будет выглядеть следующим образом.

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  value={this.state.score}
  onChange={this.handleChange.bind(this)}
/>

Answer 4

<TextField
  id="score"
  label="score"
  className={classes.textField}
  name="totalScore"
  margin="normal"
  defaultValue={score}
/>

Вы можете сделать это с помощью Jquery

$('#score').keypress(function(e){
    var code = (e.which) ? e.which : e.keyCode;
    if($('#' + e.target.id).val().length > 2)
        e.preventDefault();
    if (code > 31 && (code < 48 || code > 57)) {
        e.preventDefault();
    }
});