ExpressionEngine CMS
Open, Free, Amazing

Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

jQuery - Enter to Tab

June 26, 2009 3:56pm

Subscribe [3]
  • #1 / Jun 26, 2009 3:56pm

    Kyle Johnson

    83 posts

    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.

  • #2 / Jul 08, 2009 6:29pm

    Ricardo SDL

    15 posts

    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.

  • #3 / Jul 08, 2009 7:21pm

    Kyle Johnson

    83 posts

    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.

  • #4 / Sep 27, 2010 2:49pm

    Cambuston

    1 posts

    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;
                    }
                }
            });
        }
    }
.(JavaScript must be enabled to view this email address)

ExpressionEngine News!

#eecms, #events, #releases