如何将焦点设置到网站的下一个输入框？ [英] How to set the focus to the next input box in a website?

问题描述

我创建了一个网站，其中包含一个图像（如表格），我希望在此图片上模拟输入。因此，我定义了输入框，每个输入框的最大长度为1.第一个输入框包含自动对焦选项。我希望在第一个输入框中按下一个字符后，将焦点设置在第二个输入框中，依此类推。

我认为因此需要一个按键功能，其中包含盒子的名字，但我不知道如何继续这个。

有人可以帮助我在功能中使用什么说明吗？

非常感谢你提前。

这是我的代码。

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.

<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");
.
.
.

}

推荐答案

这里我假设你只有三个动态不生成的文本框。



这里是html代码：

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

here is the html code :

<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" />

这里是javascript代码：

here is javascript code :

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.

这篇关于如何将焦点设置到网站的下一个输入框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！