Javascript DOM HTML Input Text jump to the next text field on input length

Introduction

Jump to the next text field when a field's maxlength has been reached:

View in separate window 

<!DOCTYPE html>
<html>
<body>
<form id="myForm">
  <input type="text" size="3" tabindex="1" maxlength="3" onkeyup="myFunction(this,this.value)"> -
  <input type="text" size="2" tabindex="2" maxlength="2" onkeyup="myFunction(this,this.value)"> -
  <input type="text" size="3" tabindex="3" maxlength="3" onkeyup="myFunction(this,this.value)">
</form>/*from  ww  w  .j av  a2  s.  c o  m*/

<script>
function myFunction(x, y) {
  if (y.length == x.maxLength) {
    var next = x.tabIndex;
    if (next < document.getElementById("myForm").length) {
      document.getElementById("myForm").elements[next].focus();
    }
  }
}
</script>

</body>
</html>



PreviousNext

Related