How to disable non-integer input in the rightmost text box?

Question

I am writing one JavaScript code

Please see the images. There are 4 text boxes where only one character can be entered .

The rightmost field's id is first and the leftmost id is fourth

4 conditions are to be fulfilled

The last text box - the rightmost/first textbox will be input first, then the second one will be filled, then the third and at last the fourth
Then the rightmost/first textbox value will shift (left shift) to the second and in this way values will shift until all 4 fields are filled - See screenshot Insert
If we place the cursor on any other element except the first/rightmost it will move the cursor to the rightmost because we will only enter input in the rightmost
There will be backspace function which will delete the rightmost/first , ie. the the first field will be deleted the fourth field value will move to third, third to second, like this, a right shift will occur in this way all elements are to be deleted - see Screenshot Delete

https://i.stack.imgur.com/w8eUg.jpg -- Screenshot Insert

https://i.stack.imgur.com/fl8Gg.jpg -- Screenshot Delete

The entire solution should be in JavaScript, no jQuery can be used

<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>

I am facing only one problem - non Integer input to be disabled, no JavaScript alert, simply it will not accept any non integer input.

In my code I can enter non integer in the first/rightmost field, not in others but I have to disable non integer input in first/rightmost field.

Possible duplicate of [HTML Text Input allow only Numeric input](http://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input) — Heretic Monkey, Jan 26 '17 at 17:06
yes did mistake while posting the code from my editor Thomas solved the problem — mdv, Jan 26 '17 at 17:16

score 0 · Answer 1 · answered Jan 26 '17 at 17:08

you never called preventDefault() on the event. Notice the preventDefault in the else where you do console.log("sorry"); https://jsfiddle.net/jmuc36hs/

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();
    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 = "";
  }
});

How to disable non-integer input in the rightmost text box?

1 Answers1