REACT - 小数点以下2桁目以降の入力を防止する

Question

コンポーネントに入力ボックスがあります。入力ボックスの値に小数点以下2桁が含まれていると、ユーザーが入力を追加できないようにしたい。

など。ユーザーが10.95を入力した場合、この値の後に何も書き込まないようにしたいと考えています。彼らはまだそれを101.95に更新することができますが、最終小数点以下の後に入力が追加されないようにする必要があります。

私がこれまでに持っているコードは以下の通りです。

class inputBox extends Component { 

    countDecimals(value) { 
     if(Math.floor(value) === value) return 0; 
     return value.toString().split(".")[1].length || 0; 
    } 

    updateValue(e) { 
     if(this.countDecimals(e.target.value) > 2) { 
      //prevent user from inputting into box after the decimal place... 
     } 
    } 

    render() { 
     return(
      <input type='text' onChange={this.updateValue} /> 
     ) 
    } 
} 

Answer 1

document.getElementById("yourinput").oninput=function(){ 
    this.value=this.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join("."); 
}; 

各ドット後の2つの文字に短縮された新しい値で値を置き換えます。

Answer 2

あなたはoldvalueを保存する必要があると思います。それはうまくいくはずです。限りJavascriptとHTMLでの私の知識は、このための '簡単な解決策は' ありません行くよう

var input=document.getElementById('input'), 
 
    countDecimals=function(value) { 
 
    if(Math.floor(value) === value) return 0; 
 
    if(value.toString().split(".")[1]) 
 
    return value.toString().split(".")[1].length || 0; 
 
}, 
 
    updateValue=function(val) { 
 
    if(countDecimals(val) > 2) { 
 
     input.value=input.getAttribute('oldValue'); 
 
    } 
 
}; 
 

 
input.oninput=function(){ 
 
    updateValue(this.value); 
 
    input.setAttribute('oldValue',this.value); 
 
}

<input id="input" type="text"/>

Answer 3

。 「生の」JSフォームとExtJsフォームの両方を使って作業することで、フィールドをフォーカスして操作する方法が複数あることがわかりました。これは、適時に内部価値を操作することを困難にします。

問題を複数の問題に分割できます。これは私が取り組むしようとします。

は、あなたがあなたのロジックが何かがフィールドに起こるすべての回で実行したい

をトリガ。 次のリンクは、オプションを提供します： http://www.w3schools.com/TAGS/ref_eventattributes.asp

誰かがあなたがフィールドをぼかす後の値を変更したときにトリガーすることONCHANGE使用（あなたがクリックするか、離れてフィールドからタブを）。だからそれは良いことではありません。

キー（上、下、プレス）イベントを試すことができます。ただし、値を貼り付けるときは除外されます。

簡単に言えば、理論的には、ユーザーの入力を確実に把握し、必要な操作を行うために考えられるすべてのイベントに関数を実装しようとすることができます。

私の解決策は、フィールドをフォーカスして値を検証し、さらにロジックを行うときにタイマーを開始することです。そして、あなたがぼかしをしたいと思ったものをすべて完成させてください。値

あなたは、いくつかの気の利いた正規表現または値が正しいかどうかを示します一行文を書くことができるの正しさを決定

。最後はすべて同じです。あなたのニーズに合っているはずです。

だから、のようなもの：

var inputVar = element.value; 
var inputFloat = parseFloat(inputVar); 
var normalizeInput = Math.round(inputFloat * 100)/100; 
if(inputFloat > 0 && normalizeInput == inputFloat){ 
    #correct value 
}else{ 
    #incorrect value 
} 

正しい/間違った入力を処理

今、あなたは、ユーザーの入力を処理し、何かをしたいです。 フィールドを無効または読み取り専用に設定すると、それ以上の入力や変更はできませんが、ユーザーが自分のフィールドに何もしないようにすることができます。

私が読んだところでは、フィールドが機能的に変化しないようにしたいと思っています。あなたはそれを編集できるようにしたいと思っています。

だからそれは2つのオプションであなたを残します：目的の値でelement.valueをオーバーライドすることで、直接フィールドの内容を編集する

。

誤った入力を修正している間にユーザーが押した同じ位置にカーソルを置いて試してみます。

カーソルポジション（ブラウザに依存）が混乱する可能性がありますが、私はそれほど面倒ではありません。

最終的な実装

だから私は上記のすべての組み合わせを提案するもの：あなたがチェックし、その後、あなたは機能の実行でのsetTimeoutかのsetInterval http://www.w3schools.com/jsref/met_win_settimeout.asp http://www.w3schools.com/jsref/met_win_setinterval.asp

の実行を開始フォーカスで

を以前の値が設定されている場合

最初はそうではありません。 この前の値をどこかに保持する必要があります。javascript内の変数に保持するか、DOMのフィールドに入れることができます。この値は、それを保存する前に正しいかどう

var inputElement.setAttribute('old_value', oldValue); 

http://www.w3schools.com/jsref/met_element_setattribute.aspは今、あなたは他のちょうど空白に戻ってそれをデフォルト（または、あなたがで文字を切り取る保つことができる検証し、何かに値を正常化しようとすると、確認してください例えば右）。

今度は、実行ごとに値が正しいかどうかを確認します。値が正しい場合は、新しい値を '新しい'以前の値として保持します（そのメソッドを使用する場合は、再度setTimeoutを呼び出します）。

正しくない場合は、古い値を書き戻すか、入力値を正規化しようとします。失敗した場合は、最後の正しい値を使用します。あなたがのsetTimeoutかのsetIntervalがバックグラウンドで実行されているクリアblurイベントで

： http://www.w3schools.com/jsref/met_win_cleartimeout.asp http://www.w3schools.com/jsref/met_win_clearinterval.asp

document.activeElementは、この「ループ上で実行されるものと同じである場合（またはあなたがチェックできます'それはいつ止めるべきかを知っている）。

ブラーでは、値を前回チェックして、誤入力を防ぐために同じロジックを実行します。

HTML 5 input type="number" element for floating point numbers on Chrome

Try <input type="number" step="0.01" /> if you are targeting 2 decimal 
places :-). 

edited Apr 27 '15 at 18:10 
Andre Figueiredo 

のみをサポートするブラウザ上で動作します：

PLAN Bの

はHTML5番号入力フィールドを使用します。

Answer 4

React被制御コンポーネントを使用して、入力値のatrributeに状態をバインドすることができます。次に、onChangeイベントハンドラのようになります。

updateValue(e) { 
     this.setState({ value: e.target.value.toString().split(".").map((el,i)=>i?el.split("").slice(0,2).join(""):el).join(".")}) 
    } 

私のために働きました。