[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Simulate a tab key press

Posted on 2001-07-19
6
Medium Priority
?
10,751 Views
Last Modified: 2007-11-27
I have a form that when I hit the enter key, I want the cursor to tab to the next edit box.  How do I do this? Thanks.

function onEnterKey () {
  var press;
  if (window.event) {
     press = window.event.keyCode;
  } else if (e) {
     press = e.which;
  } else {
     return true;
  }
  if (press == 13) {
     <!--WHAT DO I DO HERE?-->
    return false
  }
  return true
}

document.onkeypress = onEnterKey;


0
Comment
Question by:atsac
  • 4
  • 2
6 Comments
 
LVL 2

Expert Comment

by:elstcb
ID: 6299475
Would something like:

<form name="myForm">
<input type="text" name="text1" onBlur="this.form.text2.focus()" onChange="this.form.text2.focus()">
<input type="text" name="text2" onBlur="this.form.text3.focus()" onChange="this.form.text3.focus()">
<input type="text" name="text3">
</form>

be acceptable? No need to watch for keypresses then.

Steve
0
 
LVL 2

Expert Comment

by:elstcb
ID: 6299493
Alternatively I think you need to send the next field to the function and focus from there.

in your input include:
onKeyDown="onEnterKey(nextFormElement)"

and then:
function onEnterKey (formElement) {
 var press;
 if (window.event) {
    press = window.event.keyCode;
 } else if (e) {
    press = e.which;
 } else {
    return true;
 }
 if (press == 13) {
   formElement.focus();
   return false
 }
 return true
}


0
 

Author Comment

by:atsac
ID: 6299668
<form name=myform>
  <pre>   ITEM DESCRIPTION                      PRICE      QTY
<input type=text name=2100   size=1 value=0 priorval=0 price="5.99" onChange="this.form.total.value=Choice2100(this);">
<input type=text name=6P   size=1 value=0 priorval=0 price="10.99" onChange="this.form.total.value=Choice6P(this);">

This is part of my code.  This handles when someone clicks the mouse in another edit box.  I need to be able to capture the enter key press and make the cursor go to the next editbox.  The Tab key does exactly what I want.  I want the enter key to do the same thing.  I need the onEnterKey() function to prevent the enter key from defaulting to the other button I have on the page.  I tired your above solution.  How do I pass the next editbox name to the onEnterKey() function?
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 2

Accepted Solution

by:
elstcb earned 120 total points
ID: 6300050
Ok, simpler than I thought it was going to be then. I removed your onChange calls as I didn't have the part of the form that they refer to, other than that this seems to do the job.

I did a select() as well so when it simulates the tab it also selects the content of the next box, not sure if you wanted this or not but it's easy to remove.

<html>
<head>
<script>
function onEnterKey(formElement) {
var press;
if (window.event) {
   press = window.event.keyCode;
} else if (e) {
   press = e.which;
} else {
   return true;
}
if (press == 13) {
  document.myform[formElement].focus();
  document.myform[formElement].select();
  return false
}
return true
}
</script>
</head>

<body>
<form name="myform">
<input type="text" name="2100" size="1" value="0" priorval="0" price="5.99" onKeyDown="onEnterKey('6P');">
<input type="text" name="6P" size="1" value="0" priorval="0" price="10.99">

</form>
</body>
</html>

HTH,

Steve
0
 

Author Comment

by:atsac
ID: 6308513
Thanks, that's what I needed.
0
 
LVL 2

Expert Comment

by:elstcb
ID: 6309344
Glad to have helped.

Steve
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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

830 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