防止用户输入大于 3 位小数的浮点数
Prevent user from entering a float number, greater than 3 decimals
我有一个使用与此代码反应的输入字段:
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,它应该会阻止用户在键盘上输入更多数字。关于如何实施这个有什么想法吗?
像其他人建议的那样,使用 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();
}
}
我有一个使用与此代码反应的输入字段:
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,它应该会阻止用户在键盘上输入更多数字。关于如何实施这个有什么想法吗?
像其他人建议的那样,使用 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();
}
}