Solved

Make Tab key behave like Enter key

Posted on 2011-03-21
11
1,019 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
  • 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
Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 
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

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

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

Not long ago I saw a question in the VB Script forum that I thought would not take much time. You can read that question (Question ID  (http://www.experts-exchange.com/Programming/Languages/Visual_Basic/VB_Script/Q_28455246.html)28455246) Here (http…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

770 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