javascript - 阻止用户输入大于 3 位小数的 float

Question

我有一个使用以下代码进行 react 的输入字段:

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 属性，这样用户就不会输入小数点后三位以上的 float 。

如果用户输入这样的数字:1.234，它应该阻止用户输入更多数字，尽管用户在键盘上打字。关于如何实现这一点有什么想法吗？

Answer 1

就像其他人建议的那样，使用 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();
    }
}