jQuery Tab and Enter Events

by b9chris

HTML

<input id=one /> <input id=two />
<div id=status></div>

CSS

body {
    font: 10pt Verdana;
}

JavaScript

function say(s) {
    var status = $('#status');
    status.append('<div>' + s + '</div>');
}

$('body').on('keydown', 'input', function(ev) {
    if (ev.which == 9) {
        var tabEv = $.extend({}, ev, { type: 'tab' });
        return $(ev.target).trigger(tabEv);
    }
    
    if (ev.which == 13) {
        var enterEv = $.extend({}, ev, { type: 'enter' });
        return $(ev.target).trigger(enterEv);
    }
});

$.fn.tab = function(selector, data, fn) {
    return this.on('tab', selector, data, fn);
};
$.fn.enter = function(selector, data, fn) {
    return this.on('enter', selector, data, fn);
};

$('#one').tab(function(ev) {
    say('tab');
});
$('#one').enter(function() {
    say('enter');
});