防止用户，大于3个小数

我有使用与此代码反应的输入字段：防止用户，大于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它应该阻止用户输入更多数字，尽管他的键盘上键入了。有关如何实现这一点的任何想法？

来源

2017-05-26 user7334203

你到目前为止尝试过什么？请不要指望我们为您编写代码。提示：我会将纯功能组件转换为类组件，并使用'onKeyDown'处理程序方法来验证当前输入的值。 –

我从来没有说过要为我写代码。我的项目对容器使用无状态组件是强制性的。 – user7334203

尝试'input type =“number”'您可以通过[步骤属性]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number）控制输入大小。这将在浏览器级别上工作，尽管只有那些支持这个HTML元素的浏览器才可以。但是，为什么你想阻止用户从一个特定的号码？无论如何，浮动将翻译为32位 – getjackx

像其他人一样，使用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(); 
    } 
}

来源

2017-05-26 14:45:48

我接受它作为答案，但我不完全正确。当用户输入一个非十进制数时，它会阻止他输入更多数字。 – user7334203

啊好吧，更新小提琴允许小数点前的任何数量的数字。 https://jsfiddle.net/bv9d3bwk/1/ –

太棒了！谢谢:) – user7334203

防止用户，大于3个小数

回答

相关问题