Part of the EllisLab Network
   
 
jQuery - Enter to Tab
Posted: 26 June 2009 02:56 PM   [ Ignore ]  
Grad Student
Avatar
Rank
Total Posts:  80
Joined  03-24-2009

I found numerous tutorials on how to perform the act of turning an enter key into a tab key.  It seemed simple enough, capture the keypress event and return false while setting the focus to the next field.

So I went searching and found this link, which helped with the jQuery code needed, so I put it all together and did some testing.  The code below seems to be the best option if you’re using jQuery.

$(document).ready(function(){
    
// get only input tags with class data-entry
    
textboxes = $("input.data-entry");
    
// now we check to see which browser is being used
    
if ($.browser.mozilla{
        
$(textboxes).keypress (checkForEnter);
    
else {
        
$(textboxes).keydown (checkForEnter);
    
}
}
);

function 
checkForEnter (event{
    
if (event.keyCode == 13{
          currentBoxNumber 
textboxes.index(this);
        if (
textboxes[currentBoxNumber 1] != null{
            nextBox 
textboxes[currentBoxNumber 1]
            nextBox
.focus();
            
nextBox.select();
            
event.preventDefault();
            return 
false;
        
}
    }

I hope this helps someone out looking for a nice Enter to Tab function, especially nice is the ability to limit which inputs get the enter key, and which switch focus.

**Edit**
Corrected code for missing parenthesis at end of the ready method. Thank you to Ricardo SDL for catching this error.

 Signature 

View my Flickr Account!

Profile
 
 
Posted: 08 July 2009 05:29 PM   [ Ignore ]   [ # 1 ]  
Summer Student
Total Posts:  24
Joined  01-31-2009

I’ve found a little error in the code:

$(document).ready( function() {
        
// get only input tags with class data-entry
        
textboxes = $("input");
        
//alert(textboxes.length);
        // now we check to see which browser is being used
        
if ($.browser.mozilla{
            
$(textboxes).keypress (checkForEnter);
        
else {
            
$(textboxes).keydown (checkForEnter);
        
}
    }
); 

It was missing the last parenthesis after the end of the function. Thnaks for sharing the code anyway.

Profile
 
 
Posted: 08 July 2009 06:21 PM   [ Ignore ]   [ # 2 ]  
Grad Student
Avatar
Rank
Total Posts:  80
Joined  03-24-2009

So very sorry about that. 

I had a lot of other code in my function that I decided to skip over and I forgot that the last parenthesis was needed.  Oops.

Thank you for bringing that up.  I will see if I can edit the main post to reflect the change.

 Signature 

View my Flickr Account!

Profile
 
 
Posted: 27 September 2010 01:49 PM   [ Ignore ]   [ # 3 ]  
Summer Student
Total Posts:  1
Joined  09-27-2010

This function will work with texboxes, selects, textareas and any element with the class ‘enter’

$(document).ready(function(){
   
if ($.browser.mozilla{
        
$(".enter").keypress(checkForEnter);
    
else {
        
$(".enter").keydown(checkForEnter);
    
}
}
);

function 
checkForEnter(event{
    
var lfound false 
    
if (event.keyCode == 13{
        
var obj this;
        $(
".enter").each(function() {
            
if (this == obj{
                lfound 
true
            } 
else {
                
if (lfound{
                    
$(this).focus()
                    $(
this).select();
                    
event.preventDefault();
                    return 
false;
                
}
            }
        }
);
    
}
 Signature 

Luis Cambustón

Profile