Solved

Make Tab key behave like Enter key

Posted on 2011-03-21
11
1,032 Views
Last Modified: 2012-05-11
Thanks in advance for any feedback!

I'm trying to make behave a tab key like an enter key.
The following code works for IE only, but I need to make it work for firefox as well:

<body onkeydown="if(event.keyCode==9){event.keyCode=13; return event.keyCode}">

Firefox does not recognize event.keyCode, so I need to find out what I can use instead.
0
Comment
Question by:rborda
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
11 Comments
 
LVL 7

Expert Comment

by:foobarr
ID: 35184332
onkeydown="KeyDownHandler(event)"


function KeyDownHandler(event)
            {
                if (event.keyCode == 13 || event.lkeyCode == 9)
                {
                    event.returnValue = false;
                    event.cancel = true;
                    DoSomething()


                   
                }
            }

function DoSomething()
{
....
}
0
 

Author Comment

by:rborda
ID: 35184430
foobar: Thank you for your reply, but it doesn't work for me.

 I'm trying to make the last 2 lines of this code work.  Right now the tab key behaves like enter only on IE, but not in firefox cause it does not recognize event.keyCode for me to assign the value of the enter key to it as shown below.

 <script type="text/javascript">
        var obj;
        var TAB = 9;

        function checkKeyPress(evt, elem) {
            obj = elem;
            var keyCode;
            var keyReturn;

            if ("which" in evt) {// NN4 & FF &amp; Opera
                //alert('one');
                keyCode = evt.which;
//                alert(keyCode);
            } else if ("keyCode" in evt) {// Safari & IE4+
                alert('two');
                keyCode = evt.keyCode;
            } else if ("keyCode" in window.event) {// IE4+
                alert('3');
                keyCode = window.event.keyCode;
            } else if ("which" in window.event) {
                alert('4');
                keyCode = evt.which;
            } else { alert("the browser don't support"); }
            if (keyCode == TAB) {
                event.keyCode = 13;     //Enter key code
                return event.keyCode    //make tab behave like enter key
            }
        }

    </script>

0
 
LVL 13

Expert Comment

by:gamarrojgq
ID: 35184961
Hi,

FireFox will recognize  evt.which but wont let you change it like IE, what are you trying to do changing the TAB key for an Enter? Submit your form?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:foobarr
ID: 35188919
Does you code go into

if (keycode == TAB) ??

If it does instead of setting the keycode = 13 and returning that keyCode

can you just call whatever function you are trying to execute after from within that if block?  




0
 

Author Comment

by:rborda
ID: 35188945
Hi gamarrojqq:  

Yes, I'm trying to change the TAB key for an Enter.  This is cause I got an application that recognize an enter press and not a tab when moving from one textbox to another.  This is the reason that when one user presses tab I need to change the behavior to enter.
0
 
LVL 13

Expert Comment

by:gamarrojgq
ID: 35189170
ok,  an alternative is to set the focus of the next Textbox when you recognize the TAB, I have tested your script and it enter in the

if (keyCode == TAB) {
                event.keyCode = 13;     //Enter key code
                return event.keyCode    //make tab behave like enter key
            }

But since Firefox wont let you change the keyCode it does not do nothing, but you can to something like this

if (keyCode == TAB) {
               var nextTxtBx = document.getElementById("theIDofyournextTextBox");
               nextTxBx.focus();
            }

However this could work if the number of Textboxes is well know or not too high. If you have dinamically Textboxes or a number higer than Ten I recommend you to use an Array of Textboxes and depending on the ID of the one where the TAB key is pressed, find the next ID and focus it manually
0
 

Author Comment

by:rborda
ID: 35189493
Thanks gamarrojqq, but that only makes behave enter key as tab by focusing to the next textbox.  My intention is the other way around to make tab behave like ENTER.  If user presses tab, I want this to behave as the user press the ENTER key.
0
 
LVL 13

Expert Comment

by:gamarrojgq
ID: 35190105
ok and if the users does press the Enter Key, what happend? submit the form?
0
 

Author Comment

by:rborda
ID: 35190469
It goes to another textbox and initiates the following code which only works when the enter key is pressed and not the tab.
The following code prevents the user from typing on the focused textbox while data is being retrieved for a search.
I got no control over this RequestStart and ResponseEnd since are functions provided with the application it was bought and only responds when user presses enter on the textbox after data is entered to be searched.

        <script type="text/javascript">
            function RequestStart(sender, args) {
                args.EventTargetElement.disabled = true;
            }
            function ResponseEnd(sender, args) {
                args.EventTargetElement.disabled = false;
            }
        </script>
0
 
LVL 13

Accepted Solution

by:
gamarrojgq earned 500 total points
ID: 35191186
ok try this, it would call the simulateEnter only if is FireFox, I dont know if your application would recognize the Enter but give it a try


  function checkKeyPress(evt, elem) {
            obj = elem;
            var keyCode;
            var keyReturn;

            if ("which" in evt) {// NN4 & FF &amp; Opera
                simulateEnter(); //make tab behave like enter key
                return true;    
            } else if ("keyCode" in evt) {// Safari & IE4+
                alert('two');
                keyCode = evt.keyCode;
            } else if ("keyCode" in window.event) {// IE4+
                alert('3');
                keyCode = window.event.keyCode;
            } else if ("which" in window.event) {
                alert('4');
                keyCode = evt.which;
            } else { alert("the browser don't support"); }
            if (keyCode == TAB) {
                event.keyCode = 13;     //Enter key code
                return event.keyCode    //make tab behave like enter key                
            }        
        }

function simulateEnter() {
    // Eveant handler for keydown
    document.body.addEventListener('keypress', function(e){}, true);
    //Create new event
    var e = document.createEvent('KeyboardEvent');
    //Init key event
    e.initKeyEvent('keypress', true, true, window, false, false, false, false, 13, 0);
    //Dispatch event into document
    document.body.dispatchEvent(e);
}
0
 

Author Closing Comment

by:rborda
ID: 35210191
Gamarrojqq after some testing with a small modification your recommendation worked... Thank you again!!!
        function newKey(event) {
            if (event.which != 0) key = event.which;
            else key = event.keyCode
            if (key == 13) return;
            if (key == 9) {
                var new_event = document.createEvent("KeyEvents");
                new_event.initKeyEvent("keypress", false, true, document.defaultView, false, false, false, false, 13, 13);
                event.preventDefault();
                event.target.dispatchEvent(new_event);
            }
        }
0

Featured Post

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Over the years I have built up my own little library of code snippets that I refer to when programming or writing a script.  Many of these have come from the web or adaptations from snippets I find on the Web.  Periodically I add to them when I come…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question