You can compare the input value length to the maxlength attribute and, if found to be equal, focus on the next input.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Identify this question
//var thisQuestion = $('#question{QID}');
var thisQuestion = $('#question17360');
// Remove width styles
$('input[type="text"]', thisQuestion).css('width', 'auto');
// Set the size and maxlength
$('input[type="text"]:eq(0), input[type="text"]:eq(1)', thisQuestion).attr('size', 3).attr('maxlength', 3);
$('input[type="text"]:eq(2)', thisQuestion).attr('size', 4).attr('maxlength', 4);
$('input[type="text"]', thisQuestion).each(function(i) {
$(this).attr('data-input-index', i);
});
// Auto-tab inputs when maxlength reached
$('input[type="text"]', thisQuestion).keyup(function () {
if ($(this).val().length == $(this).attr('maxlength')) {
$('input[data-input-index="'+(Number($(this).attr('data-input-index'))+1)+'"]').focus();
}
});
$('input[type="text"]', thisQuestion).bind('paste', function () {
var thisInput = $(this);
setTimeout(function() {
if ($(thisInput).val().length == $(thisInput).attr('maxlength')) {
$('input[data-input-index="'+(Number($(thisInput).attr('data-input-index'))+1)+'"]', thisQuestion).focus();
}
}, 100);
});
});
</script>
Topic Author
