<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<form action="" id="form">
First name: <input type="text" name="firstname">
Last name: <input type="text" name="lastname">
<select name="select" readonly="readonly">
<option>Select Something</option>
</select>
Last name: <input type="text" name="lastname" disabled="disabled">
Select <select name="select" id="selectBox">
<option>Select Something</option>
</select>
Last name: <input type="text" name="lastname">
Select <select name="select" readonly="readonly">
<option>Select Something</option>
</select>
<button type="submit">Submit</button>
</form>
(function($) {
$.fn.enterAsTab = function(options) {
var settings = $.extend({
'allowSubmit': false
}, options);
$(this).find('input, select, textarea, button').live("keydown", {localSettings: settings}, function(event) {
if (settings.allowSubmit) {
var type = $(this).attr("type");
if (type == "submit") {
return true;
}
}
if (event.keyCode == 13) {
var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
idx = -1;
} else {
inputs[idx + 1].focus(); // handles submit buttons
}
try {
inputs[idx + 1].select();
}
catch (err) {
}
return false;
}
});
return this;
};
})(jQuery);
$("#form").enterAsTab({ 'allowSubmit': true});
console.log($('#form').find(":input:visible:not(:disabled):not([readonly])"));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.