Any code for making Enter key for Tab Order navigation instead of Form Submission.

Discussion in 'JavaScript' started by kslokesh, Feb 14, 2009.

  1. #1
    Is there any method for making Enter keypress to result in change of focus to next field (In tab order) rather than resulting in submission of the forum till the focus reaches on Submit/Save button?

    Or

    Is there any method that we can disable the functioning of Enter Key as Submit unless the focus arrives on the Submit/Save button..

    This will help some people who have the habit of using Enter key after entering the text into different fields..

    I have very little knowledge of programming and I cant use validation as there is no need to fill all the fields in the form and some of the fields can be left empty..
     
    kslokesh, Feb 14, 2009 IP
  2. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #2
    yes, you need to trap the window.keydown or keypress and compare against the event keycodes. in your handler you then need to lookup the next field within the form and apply a .focus() method. this can be sucky as you need to allow for things like tabindex etc and you need to bind the .focus and .blur methods of your inputs to a function which stores which element is selected.

    insofar as the events are concerned, i just had a play for 2 mins and came up with this which works in firefox 3 to the extend where it stops the propagation of enter key:
    <script type="text/javascript">
    var keyHandler = function(e) { // handles keypress
        // determines whether Netscape or Internet Explorer
        k = e.keyCode;
        if (k == 13) { // enter key pressed
            console.log("hello! " + k);
            return false;
        }
    };
    window.onkeydown = keyHandler; // work together to analyze keystrokes
    </script>
    
    <form name="myform">
    field 1: <input type="text" name="box1" tabindex="1"><br>
    field 2: <input type="text" name="box2" tabindex="2"><br>
    field 3: <input type="text" name="box3" tabindex="3"><br>
    <input type="submit" value="Submit">
    </form>
    PHP:
    But, i am not 100% on how this goes in vanilla javascript - there are differences in browser interpretation for how/where the event data is stored--all fairly easy when using a framework javascript library like mootools or jquery.

    also, I have not researched this but I wonder if its possible to do an event on demand, like window.fireKeyEvent("9"); // simulate a tab press.
    anyone care to comment / has experience with it?
     
    dimitar christoff, Feb 15, 2009 IP
  3. kslokesh

    kslokesh Well-Known Member

    Messages:
    153
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #3
    Thank You dimitar christoff.. I will try it.. But is it possible to change the input type to button instead of submit and add a submit code for the click event of that button??

    Can it be done? Or is there any other method?
     
    kslokesh, Feb 15, 2009 IP
  4. dimitar christoff

    dimitar christoff Active Member

    Messages:
    882
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    90
    #4
    yeah, you can do that on a button, totally. just apply the formobject.submit() method when you reference it...
     
    dimitar christoff, Feb 15, 2009 IP