0
JavaScriptコードを1つ書いています右端のテキストボックスで非整数入力を無効にするにはどうすればよいですか？
画像をご覧ください。 1文字しか入力できない4つのテキストボックスがあります。
右端フィールドのIDが最初であり、左端のIDが
4条件が
最後のテキストボックス満たされるべき第ある - 右端/最初のテキストボックスは、第1の入力となり、次いで2番目のものは塗りつぶされ、3番目は最後の4番目になります。
次に、右端/最初のテキストボックスの値が2番目の値にシフトします（左シフト）。 Inserトン
我々は最初/一番右以外の任意の他の要素の上にカーソルを置くと、我々は唯一の削除させていただきますバックスペース機能があります右端の
で入力を入力しますので、それが一番右にカーソルを移動します右端/最初、すなわち。スクリーンショット
https://i.stack.imgur.com/w8eUg.jpgを削除参照 - 最初のフィールドは、第二、このように、右シフトは、すべての要素が削除される。このように発生するために、4番目のフィールドの値は1/3に移動する第三の削除されます - - スクリーンショットを挿入
https://i.stack.imgur.com/fl8Gg.jpg - スクリーンショットソリューション全体をJavaScriptであるべき
を削除し、何jQueryの
<form>
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="first" size="1" maxlength="1" />
<html>
<head>
</head>
<body>
<form>
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="second" size="1" maxlength="1" />
<input type="text" id="first" size="1" maxlength="1" />
</form>
<script>
var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("first");
for (var i = 0; i < myInputs.length; i++) {
myInputs[i].addEventListener("click", function() {
document.getElementById("first").focus();
})
}
myEditable.addEventListener("keypress", function(evt) {
if (evt.which >= 48 && evt.which <= 57) {
// Here, we have a number. Everything gets shifted to the LEFT
if (myInputs[0].value == "") {
for (var i = 0; i < myInputs.length - 1; i++) {
myInputs[i].value = myInputs[i + 1].value;
}
myEditable.value = String.fromCharCode(evt.which);
}
} else {
evt.preventDefault(); // newly added to prevent non integer inputs in rightmost field
console.log("Sorry");
}
})
myEditable.addEventListener("keyup", function(evt) {
if (evt.which == 8) {
//myEditable.blur();
for (var i = myInputs.length - 1; i >= 1; i--) {
myInputs[i].value = myInputs[i - 1].value;
}
myInputs[0].value = "";
}
});
</script>
</body>
</html>
私は1つの問題に直面しています - 無効にする整数入力、JavaScript警告なし、単純に非整数入力を受け付けません。
私のコードでは、最初の/右端のフィールドには非整数を入力できますが、他のフィールドには入力できませんが、最初/右端のフィールドには非整数の入力を無効にする必要があります。
'
これにhtml5制限を使用できますか？ – Kejt
@Michael Coker私はそうすることで問題を抱えています - 他の解決策を提案してください – mdv