Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Programatically focus on next input field in mobile ">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form action="https://example.com/index.php/contact" method="post" id="contactForm" name="contactForm">
  <input type="text" id="contact_name" name="contact_name" value="" class="text" />
  <input type="text" id="contact_email" name="contact_email" value="" class="text" />
  <input type="text" id="contact_phone" name="contact_phone" value="" class="text" />
  <input type="text" id="contact_subject" name="contact_subject" value="" class="text last" />
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
​
</body>
</html>
 
input {
  margin: 0px;
  width: 20px;
  text-align: center;
}
​
 
$(document).ready(function() {
  var focused = $('input:first'); 
  focused.focus(); //this is just to have a starting point
  $('input').on('keyup', function(e) {
    if(e.keyCode == 8) {
      $(this).prev('input').focus(); //trigger touchstart
      return;
    }
    if($(this).val().length >= 1) {
      if ($(this).hasClass("last")) {
            alert("done");
        return;
      }
      $(this).next('input').focus(); //trigger touchstart
    }
  });
  
  $('input').on('focus', function() {
    if(!$(this).prev('input').val()){
      $(this).prev('input').focus();
    }
  });
  
  $('input').on('touchstart', function() {
    $(this).focus();
    focused = $(this);
  });
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kapilrcpro
0viewers