Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Make Tab key behave like Enter key

Posted on 2011-03-21
11
Medium Priority
?
1,063 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
With User Account Control (UAC) enabled in Windows 7, one needs to open an elevated Command Prompt in order to run scripts under administrative privileges. Although the elevated Command Prompt accomplishes the task, the question How to run as script…
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…

598 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