Запретить пользователю вводить число с плавающей запятой, превышающее 3 десятичных знака

У меня есть поле ввода, использующее реакцию с этим кодом:

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

Я хочу добавить свойство validation или лучше preventDefault, чтобы оно не позволяло пользователю вводить плавающее число с более чем тремя десятичными знаками.

Если пользователь введет число, подобное этому: 1.234, это должно помешать пользователю ввести больше чисел, несмотря на то, что он печатает на своей клавиатуре. Любые идеи о том, как это реализовать?


reactjs javascript validation precision decimal-point
person user7334203    schedule 26.05.2017    source источник
comment
что ты уже испробовал? Пожалуйста, не ожидайте, что мы напишем код за вас. Подсказка: я бы преобразовал чистый функциональный компонент в компонент класса и использовал метод обработчика onKeyDown для проверки введенного в данный момент значения.   -  person Patrick Hund    schedule 26.05.2017
comment
Я никогда не говорю писать код за меня. Для моего проекта обязательно использовать компоненты без состояния с контейнерами.   -  person user7334203    schedule 26.05.2017
comment
Попробуйте input type="number" вы можете контролировать размер ввода с помощью атрибута шага . Это будет работать на уровне браузера, но только с тем браузером, который поддерживает этот элемент HTML. Но почему вы хотите запретить пользователю определенный номер? В любом случае число с плавающей запятой будет преобразовано в 32-битное.   -  person getjackx    schedule 26.05.2017
comment
Это обязательная проверка. Я не должен позволять пользователю вводить число с более чем тремя десятичными знаками   -  person user7334203    schedule 26.05.2017

Ответы (1)


arrow_upward
1
arrow_downward

Как предложил кто-то другой, используйте событие onKeyDown, чтобы ограничить ввод. Быстрый и грязный пример: https://jsfiddle.net/bv9d3bwk/2/

const InputField = props => (
  <div className="input-row">
    <input
      {...props.input}
      type={props.type}
      className="form-control input-box__input"
      placeholder={props.placeholder}
      value={props.value}
      defaultValue={props.defaultValue}
      defaultChecked={props.defaultChecked}
      disabled={props.disabled}
      onChange={props.onChange}
      onKeyDown={this.onKeyDown}
      checked={props.checked}
    />
    {props.meta.touched && props.meta.error &&
    <span className="error">
        {props.intl.formatMessage({ id: props.meta.error }) }
      </span>}
  </div>
);

const onKeyDown = (e) => {
    const decimal_index = e.target.value.indexOf('.');
    if(decimal_index > -1){
        var decimals = e.target.value.substring(decimal_index, e.target.value.length+1);
        if(decimals.length > 4 && e.keyCode !== 8){
           e.preventDefault();
        }
        //this.props.onChange();
    }
}
person Chase DeAnda    schedule 26.05.2017
comment
Я принимаю это как ответ, но это не совсем правильно. Когда пользователь вводит недесятичное число, это не позволяет ему вводить больше цифр. - person user7334203; 26.05.2017
comment
Ах, хорошо, обновил скрипку, чтобы разрешить любое количество чисел до десятичной точки. jsfiddle.net/bv9d3bwk/1 - person Chase DeAnda; 26.05.2017
comment
Потрясающий! Спасибо :) - person user7334203; 26.05.2017
comment
Я хочу задать еще один вопрос. Ваше решение почти идеально, за исключением одного: когда пользователь вводит цену с более чем 3 знаками после запятой, система ограничивает его до 3 знаков после запятой, но он переключает последнюю цифру на последнюю цифру нажатия. Например, пользователь вводит .0.562. Когда после этого он вводит цифру 3, система заменяет 2 на 3. это неверно, пользователь должен удалить предыдущую цифру, если он хочет ее заменить. - person user7334203; 14.06.2017
comment
@user7334203 user7334203 Посмотрев на мой jsfiddle, я не уверен, о чем я думал! лол, я обновил скрипку, чтобы просто не дать им ничего вводить, как только они достигнут максимума. jsfiddle.net/bv9d3bwk/2 - person Chase DeAnda; 14.06.2017
comment
Обновлено. jsfiddle.net/bv9d3bwk/3. Для будущих изменений вы можете просто проверить код ключа и разрешить все, что хотите (введите ключ). - person Chase DeAnda; 14.06.2017
comment
Потрясающе :) Большое спасибо!! - person user7334203; 14.06.2017