How to set the focus to the next input box in a website?

Question

0.00/5 (No votes)

See more:

I was created one website, which contain an image (like a table), and I want simulate input over this picture. So, I define input boxes, each having a maximum length = 1. The first input box contains the autofocus option. I would like that after pressing a character in first input box, the focus to be set in the second input box, and so on.
I assume that it is therefore necessary one key down function, which contains the names of boxes, but I do not know how to continue this.
Could someone help me what instructions should be use in the function?
Thank you very much in advance.
Here is my code.

HTML

<p><img alt="" src="http://files.....jpg" style="width: 500px; height: 783px;"></p>
<style type="text/css">
#Editbox1
{
border: 1px #A9A9A9 none; background-color: transparent; color :#000000;font-family:
Times New Roman; font-weight:bold;font-size: 30px; text-align: center;vertical-align: middle;
}#Editbox2
{
border: 1px #A9A9A9 none; background-color: transparent; color :#000000;font-family:
Times New Roman; font-weight:bold;font-size: 30px; text-align: center;vertical-align: middle;
}#Editbox3
{
border: 1px #A9A9A9 none; background-color: transparent; color :#000000;font-family:
Times New Roman; font-weight:bold;font-size: 30px; text-align: center;vertical-align: middle;
}
</style>
<p><input autofocus="" id="Editbox1" maxlength="1" name="Editbox1"  onkeydown="onkeydownfunction(event)"  style="position:absolute; left:260px; top:303px;width:40px;height:40px;line-height:20px;z-index:1;" type="text" value="">
</p>
<p><input  id="Editbox2" maxlength="1" name="Editbox2" onkeydown="onkeydownfunction(event)"  style="position:absolute; left:315px; top:303px;width:40px;height:40px;line-height:20px;z-index:1;" type="text" value="">
</p>
<p><input id="Editbox3" maxlength="1" name="Editbox3" onkeydown="onkeydownfunction(event)"  style="position:absolute; left:370px; top:303px;width:40px;height:40px;line-height:20px;z-index:1;" type="text" value="">
</p>

function keydownfunction(event)
{
var tab=new Array("Editbox1","Editbox2","Editbox3");
.
.
.

}

Posted 23-Nov-15 21:22pm

Member 10565876

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Raje_ · Answer 1 · 2015-11-23T23:02:00

Here I am assuming that you have only three textbox which is not generating dynamically.

here is the html code :

JavaScript

<input type="text" id="Editbox1" onkeypress="MoveToNextBox(this, event)"  maxlength="1" />
        <input type="text" id="Editbox2" onkeypress="MoveToNextBox(this, event)"  maxlength="1" />
         <input type="text" id="Editbox3"  maxlength="1" />

here is javascript code :

JavaScript

function MoveToNextBox(obj, event) {
   var tab=new Array("Editbox1","Editbox2","Editbox3");
   var id = obj.id;
   var backSpace = event.keyCode; //find keypress
   if (backSpace != 8) { //check if backspace is pressed or not
       if (id == tab[0]) { //match the id
           document.getElementById(tab[1]).focus(); //set focus to next textbox
       }
       if (id == tab[1]) {
           document.getElementById(tab[2]).focus();
       }
   }
}

Good luck.