Solved

Make Tab key behave like Enter key

Posted on 2011-03-21
11
1,022 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
When you see single cell contains number and text, and you have to get any date out of it seems like cracking our heads.
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …

821 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