I am using following script to bind a keypress event on each textbox so that on reaching the maxlength, focus will switch to next input field. Passing classname as the prarameters to the function.

function autoFocusPhoneFields(txtbox1ID,txtbox2ID) {
    $('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
        $(this).bind('keypress', function(){
        if(this.value.length == $(this).attr('maxlength')) {
            $(this).next('input').focus();
        } 
     });
});
}
    $(document).ready(function(){
    autoFocusPhoneFields('mobileprefix','mobilecode');
});

As i have mentioned two different input ..it is runnign fine. Butis there any way around so that it will get the classnames and runs through each input box to attach keypress event.

I am using following script to bind a keypress event on each textbox so that on reaching the maxlength, focus will switch to next input field. Passing classname as the prarameters to the function.

function autoFocusPhoneFields(txtbox1ID,txtbox2ID) {
    $('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {
        $(this).bind('keypress', function(){
        if(this.value.length == $(this).attr('maxlength')) {
            $(this).next('input').focus();
        } 
     });
});
}
    $(document).ready(function(){
    autoFocusPhoneFields('mobileprefix','mobilecode');
});

As i have mentioned two different input ..it is runnign fine. Butis there any way around so that it will get the classnames and runs through each input box to attach keypress event.

• javascript
• jquery

3 Answers 3

If I understand you correctly, you want to attach the same event handler to every input field? Just use the selector:

$(':text') 

(for all input type="text") fields.

So just change

$('input.'+txtbox1ID+', input.'+txtbox2ID+'').each(function() {

to:

$(':text').each(function() {

This works fine.

HTML

<input id="one" class="inp" maxlength="5" />
<input id="two" class="inp" maxlength="3" />
<input id="three" class="inp" maxlength="2" />

JS Part

$(function(){
    var onpress = function(){
        var val = $(this).val();
        var next_input = $(this).next('input');
        var mx = $(this).attr('maxlength');
        try {
            mx = Number(mx);
            if (next_input.length >= 1 && val.length >= mx){
                next_input.focus();
            }
        } catch(x){}

    }

    $('input.inp').bind('keypress', onpress);
});

If I get you correctly you just need to use type selector for input. You can also get rid of calling each to iterate thru inputs since binding event to multiply elements interates via them. So you can change your code into something like following:

var autoFocusPhoneFields = function () {
    $('input:text').keypress(function() {
        if(this.value.length == $(this).attr('maxlength'))
            $(this).next('input').focus();            
    });
}
$(autoFocusPhoneFields);