/*
I've used a plugin to extend the jQuery object with a jumpsTo method
which automatically shifts focus to the specified element once
maxlength characters have been typed in the current field.
*/
/* My code */
$('div.date input, div.time input').each(function() {
$(this).jumpsTo($(this).next())
});
/* The type of solution I'm looking for (this doesn't work) */
$('div.date input, div.time input').jumpsTo($(this).next())
Refactorings
No refactoring yet !
tmpvar
January 23, 2009, January 23, 2009 18:06, permalink
/* jquery.fieldjump.js */
jQuery.fn.jumpsTo = function() {
return this.each(function(k,element) {
this.bind('keyup', {to: element}, function(event) {
var to = $(event.data.to)
var from = $(event.target)
var keys_typed = from.val().length;
var keys_required = from.attr('maxlength');
if (isNumber(event.keyCode) && keys_typed == keys_required)
{
to.focus();
if (to[0].type == 'text') {
to.val('');
}
}
});
});
}
function isNumber(n) {
return (n >= 48 && n <= 57) || (n >= 96 && n <= 105);
}
tmpvar
January 23, 2009, January 23, 2009 18:24, permalink
/* jquery.fieldjump.js */
jQuery.fn.jumpsTo = function() {
return this.each(function() {
this.bind('keyup', {to: element}, function(event) {
var to = $(event.data.to)
var from = $(event.target)
var keys_typed = from.val().length;
var keys_required = from.attr('maxlength');
if (isNumber(event.keyCode) && keys_typed == keys_required)
{
to.focus();
if (to[0].type == 'text') {
to.val('');
}
}
});
});
}
function isNumber(n) {
return (n >= 48 && n <= 57) || (n >= 96 && n <= 105);
}
Rene Saarsoo
January 23, 2009, January 23, 2009 22:28, permalink
What ever the rest of the code of tmpvar does, I really can't stand the isNumber() function. It should be named isNumberKey() or something like this. Although I can't understand how are keycodes 96..105 related to numbers.
Adam Soltys
January 24, 2009, January 24, 2009 01:22, permalink
Rene, I'm the culprit with the isNumber function. I'd actually been meaning to rename it before you mentioned it. I believe 96..105 are numbers from the NUMPAD as opposed to the number row at the top of the keyboard.
Incidentally, I never did figure out how to turn my three lines into one line, even with tmpvar's refactoring of my plugin. He moved the each() into the plugin method itself but I couldn't get things to work that way.
Rene Saarsoo
January 24, 2009, January 24, 2009 09:22, permalink
Maybe something like this...
/* jquery.fieldjump.js */
jQuery.fn.jumpsTo = (function(){
function isTextKey(n) {
// far from correct, but handles the most common cases
return n > 47;
}
return function(to) {
return this.each(function() {
$(this).bind('keyup', function(event) {
var keys_typed = $(this).val().length;
var keys_required = $(this).attr('maxlength');
if (isTextKey(event.keyCode) && keys_typed == keys_required) {
$(to).focus();
}
});
});
};
})();
// somewhere inside your code...
$('div.date input').jumpsTo('div.time input');
aleemb
February 11, 2009, February 11, 2009 13:11, permalink
FWIW, you should not be shifting focus out of a field if you consider it completed or filled. Even though that sounds like a great feature of convenience it is unconventional because user are pre-conditioned to TAB through fields. You'll end up with users hitting TAB again and then hitting Shift-TAB after they realize the TAB was redundant.
Similarly, if a textarea for example is limited to N characters, you should not be focusing out of it when N characters are reached. You should instead show a red label informing the number of characters being overrun. This gives the user the opportunity to finish his thought, then word-smith his input to fit it into the max character limit.
Adam Soltys
February 13, 2009, February 13, 2009 17:30, permalink
aleemb, normally I'd agree with you about autotabbing but in this case the application is being written for a small group of known users who are using it to perform data entry. They'll be entering tens of thousands of records through these forms so any way to cut down the amount of keystrokes they need to type in is a huge benefit for them.
I have a a feeling that these three lines could be done with one line if only I had some better jQuery chops.