JSFiddle - React, Tailwind, and code Playground

by damiensawyer

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div data-bind="nextFieldOnEnter:true">
	    <input type="text" />
	    <input type="text" />
	    <select>
		  <option value="volvo">Volvo</option>
		  <option value="saab">Saab</option>
		  <option value="mercedes">Mercedes</option>
		  <option value="audi">Audi</option>
		</select>
	    <input type="text" />
	    <input type="text" />
	</div>

JavaScript

ko.bindingHandlers.nextFieldOnEnter = {
	    init: function(element, valueAccessor, allBindingsAccessor) {
	        $(element).on('keydown', 'input, select', function (e) {
	            var self = $(this)
	            , form = $(element)
	              , focusable
	              , next
	            ;
	            if (e.keyCode == 13) {
	                focusable = form.find('input,a,select,button,textarea').filter(':visible');
	                var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
	                next = focusable.eq(nextIndex);
	                next.focus();
	                return false;
	            }
	        });
	    }
	};

	ko.applyBindings({});