防止用戶，大於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個小數

回答

相關問題