Solved

Simulate a tab key press

Posted on 2001-07-19
6
10,318 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 2

Accepted Solution

by:
elstcb earned 30 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now