Solved

Using enter instead of tab (but with a button involved)

Posted on 2014-10-23
8
96 Views
Last Modified: 2014-10-23
I have the following code to allow the use of the enter key instead of tab to move through the fields on my form

<script language="javascript">
document.onkeydown = KeyPress;
function KeyPress() {
if (event.keyCode == 13 && event.srcElement.type != 'textarea')
{
event.keyCode=9;
}
}
</script>

I need to also allow the enter key to be pressed when a button is involved, <input type=button ...>, but with the above code the enter is replaced with a tab.  What do I need to change.
0
Comment
Question by:jdthedj
[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
  • 3
8 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40400509
document.onkeydown = KeyPress;
function KeyPress(event) {
    elem = (event.srcElement ? event.srcElement : event.target);
    if (event.keyCode == 13 && elem.type != "button" && elem.type != 'textarea') {
        event.target.nextSibling.nextSibling.focus();
        event.preventDefault
    }
}

Open in new window

0
 
LVL 3

Author Comment

by:jdthedj
ID: 40400538
Thanks for the reply Gary.  I cannot get the code to do anything.  I put in an alert at the start of the function and it fires, so it is getting to the code OK, but nothing happens.  I am using IE 11
0
 
LVL 58

Expert Comment

by:Gary
ID: 40400541
Code works fine
http://jsfiddle.net/9qxpvt0a/2/

Do you have a working link, this will depend on your markup
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 3

Author Comment

by:jdthedj
ID: 40400551
I am working in our intranet so it is not outside.  Here is the whole code of the test page.

<FORM NAME="Test2" ACTION="Test2.htm" METHOD="Post">

<SCRIPT type="text/JavaScript">
<!-- hide
function ProcessForm(Nme)
{
if (Nme=="Get")
{
document.Test2.action="Test2.htm";
document.Test2.submit();
}
}
// stop hiding -->
</script>

<script language="javascript">
document.onkeydown = KeyPress;
function KeyPress(event) {
    elem = (event.srcElement ? event.srcElement : event.target);
    if (event.keyCode == 13 && elem.type != "button" && elem.type != 'textarea') {
        event.target.nextSibling.nextSibling.focus();
        event.preventDefault
    }
}
</script>

<DIV ID="Control1" STYLE="position:absolute; top: 40px; left: 100px; width: 100px; height: 22px;">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
<TR VALIGN=top><TD><DIV align="Left">

<input type=text name="One" size=10><br>
<input type=text name="Two" size=10><br>
<input type=button value="Go" onClick="ProcessForm('Get')">

</DIV></TD></TR></TABLE></DIV>
</FORM>

Open in new window

0
 
LVL 3

Author Comment

by:jdthedj
ID: 40400570
Thanks Gary - After more experimentation I have got it working with the following code

<script language="javascript">
document.onkeydown = KeyPress;
function KeyPress() {
var elem = (event.srcElement ? event.srcElement : event.target);
if (event.keyCode == 13 && event.srcElement.type != 'textarea' && elem.type != 'button')
{
event.keyCode=9;
}
}
</script>
0
 
LVL 3

Author Closing Comment

by:jdthedj
ID: 40400574
The line that provided the solution was

elem = (event.srcElement ? event.srcElement : event.target);
0
 
LVL 58

Expert Comment

by:Gary
ID: 40400575
Use this instead, doesn't rely on consecutive elements

http://jsfiddle.net/9qxpvt0a/6/

document.onkeydown = KeyPress;

function KeyPress(event) {
    elem = (event.srcElement ? event.srcElement : event.target);
    if (event.keyCode == 13 && elem.type != "button" && elem.type != 'textarea') {
        el = elem.nextSibling;
        while (el.type != "text" && el.type != "textarea" && el.type != "button") {
            el = el.nextSibling;
        }
        el.focus();
        event.preventDefault
    }
}

Open in new window

0
 
LVL 3

Author Comment

by:jdthedj
ID: 40400593
Great! - thanks Gary
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

617 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