Javascript - Why this piece of Javascript code is working in JSFiddle & JSBin but not on any browser?

Question

Please see the image. There are 7 text boxes where only one character can be entered .

4 conditions are to be fulfilled

1. The last text box - the rightmost/seventh textbox will be input first, then the sixth one will be filled , then the fifth and so on

2. Then the rightmost/seventh textbox value will shift (left shift) to the sixth and in this way values will shift until all 7 fields are filled

3. If we place the cursor on any other element except the last/seventh/rightmost it will move the cursor to the rightmost .

4. There will be backspace function which will delete the rightmost, ie. the the seventh field will be deleted the first field value will move to second, second to third , sixth to seventh , like this , a right shift will occur in this way all elements are to be deleted

The entire solution should be in Javascript , no JQuery can be used

https://i.stack.imgur.com/dISMA.jpg

Please refer the image above

Javascript Code

var myInputs = document.getElementsByTagName("input");
var myEditable = document.getElementById("seventh");
for (var i = 0; i < myInputs.length; i++) {
 myInputs[i].addEventListener("click", function() {
 document.getElementById("seventh").focus();
 })
}

myEditable.addEventListener("keydown", function(evt) {
 /****
   *  A few things are handled here: we can check if
   *  the input is a numeric, and we can check if the input
   *  is a backspace. Nothing else is allowed.
  ****/
  if (evt.which == 8) {
  // If a backspace has been pressed, move all the input
  //  values one field UP.

      myEditable.blur();
     for (var i = myInputs.length - 1; i >= 1; i--) {
     myInputs[i].value = myInputs[i - 1].value;
    }
    myInputs[0].value = "";
   } else if (evt.which >= 48 && evt.which <= 59) {
    // 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 {
  console.log("You did something else...");
 }
})

HTML Code

 <form>
<input type="text" id="first" size="1" maxlength="1" />  
<input type="text" id="second" size="1" maxlength="1" />  
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />  
</form>

In this code there are two problems

1. First it is working in JSBin - https://jsbin.com/duxogezake/edit similarly it is working in Fiddle but not in Chrome 55 or any other browser But it should work in chrome by any means

2. When we are using backspace the cursor should remain in the last/rightmost/seventh text box but the cursor is not remaining - we have to place the cursor again & again in the last text box to do the operation (read the fourth condition in the top before )

Answer 1

TRY THIS: Press the "run code snippet" below and let me know if it works on your end.

I tested this in my localhost. It is working fine both in my Chrome and Opera, and the cursor is now staying in the rightmost input field.

Although, you seem to have other bugs in your code, because the texts "Ck" and "Dv" are appearing when the input values are shifted. (EDIT: nevermind. I think it's because I entered some characters instead of numbers, which you seemed to have restricted.)

var myInputs = document.getElementsByTagName("input");
    for (var i = 0; i < myInputs.length; i++) {
      myInputs[i].addEventListener("click", function() {
        document.getElementById("seventh").focus();
      })
    }
    
    /*wrap your code inside window.load to prevent premature executuion*/
    window.onload = function() {
    console.log('window has loaded');
      var myEditable = document.getElementById("seventh");
      myEditable.addEventListener("keydown", function (evt) {
        /****
         *  A few things are handled here: we can check if
         *  the input is a numeric, and we can check if the input
         *  is a backspace. Nothing else is allowed.
         ****/
        if (evt.which == 8) {
          // If a backspace has been pressed, move all the input
          //  values one field UP.
          myEditable.blur();
          for (var i = myInputs.length - 1; i >= 1; i--) {
            myInputs[i].value = myInputs[i - 1].value;
          }
          myInputs[0].value = "";
        } else if (evt.which >= 48 && evt.which <= 59) {
          // Here, we have a number. Everything gets bumped 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 {
          console.log("You did something else...");
        }
    
        /*keep the cursor on the seventh input field right after hitting backspace and shifting values*/
        myEditable.focus();
    
      });
    
    }

<form>
<input type="text" id="first" size="1" maxlength="1" />  
<input type="text" id="second" size="1" maxlength="1" />  
<input type="text" id="third" size="1" maxlength="1" />
<input type="text" id="fourth" size="1" maxlength="1" />
<input type="text" id="fifth" size="1" maxlength="1" />
<input type="text" id="sixth" size="1" maxlength="1" />
<input type="text" id="seventh" size="1" maxlength="1" />  
</form>