JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<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" />
    <input type="text" id="captcha" name="captcha" value="" class="text" />
    <button type="button">Next</button>
</form>

CSS

input {
    margin:20px;
}

JavaScript

$(document).ready(function () {
    var focused = $('input:first'); //this is just to have a starting point
    $('button').on('click', function () {      
        focused.next('input').trigger('touchstart'); //trigger touchstart
    });
    $('input').on('touchstart', function () {
        $(this).focus();
        focused = $(this);
    });
    
    $('input').on('keyup',function(){
        if(focused.val().length){
             focused.next('input').trigger('touchstart');
        } else {
            //focused.prev('input').trigger('touchstart');
        }
    });
});