如何使用javascript使用方向键控制光标在table单元格的输入框的中跳动。

Question

有一个表格table，id="myGrid"，有3行，n列，不固定。
每个格子里面都只有一个文本输入框，<input type="text" value="" />
要求实现，光标在某个输入框文本的中部的时候，按左右方向键，在文本中左右移动，
当光标移动文本的最后一个字符后，再按右方向键，光标跳到后面一个文本框。（如果当前行后面没有文本框了，则跳到下一行的第一个文本框 （可不要））。
同理当移动到文本最前面一个字符时，再按向左键，光标跳到前一个文本框。
按向下键跳到下一行，当前列的文本框。
按向上键跳到上一行，当前列的文本框。
如果上一行，或下一行没有文本框了，则不跳动了。表格类似下面。    <table id="myGrid" border='1'>      
<tr>   
<td><input type="text" value="测试d用" /></td><td><input type="text" value="测d试用" /></td><td><input type="text" value="测asf试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测试q用" /></td><td><input type="text" value="abcdefg" /></td><td><input type="text" value="测as试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测ds用" /></td><td><input type="text" value="测试用" /></td><td><input type="text" value="测试ss用" /></td>   
</tr>
<tr>   
<td><input type="text" value="测dd试用" /></td><td><input type="text" value="测s试dd用" /></td><td><input type="text" value="测试sg用" /></td>   
</tr>        
</table> 

Answer 1

给table一个onkeypress事件,然后通过focus方法转移光标

Answer 2

我要的是javascript代码。最好有全套的。我可以多给分。

Answer 3

www.xumv.com//测试成功
<table id="myGrid" border='1'>      
<tr>   
<td><input type="text" value="测试d用" /></td><td><input type="text" value="测d试用" /></td><td><input type="text" value="测asf试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测试q用" /></td><td><input type="text" value="abcdefg" /></td><td><input type="text" value="测as试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测ds用" /></td><td><input type="text" value="测试用" /></td><td><input type="text" value="测试ss用" /></td>   
</tr>
<tr>   
<td><input type="text" value="测dd试用" /></td><td><input type="text" value="测s试dd用" /></td><td><input type="text" value="测试sg用" /></td>   
</tr>        
</table> 
<script language="JavaScript">
<!--
var dd=document.getElementById("myGrid").getElementsByTagName("input");
 for(var i=0;i<dd.length;i++){
  dd[i].onkeydown =four(i);
 }//for
function four_s(d,ojb){
var r =ojb.createTextRange();
r.moveStart('character',d);
r.collapse(true);
r.select();
}
function four(d){
 return function(){
 var iekey=event.keyCode; 
  if(iekey==38||iekey==40){
   var a=(12+d+(iekey-39)*3)%12;
   dd[a].focus();
  }//if
  if(iekey==37||iekey==39){
    var sel=document.selection.createRange();
    sel.setEndPoint("StartToStart",dd[d].createTextRange())
    var s=sel.text.length
     if(iekey==37&&s==0){
      var a=(d-1)%12;
      dd[a].focus();
      four_s(dd[a].value.length,dd[a])
      return false;
     }//if
     if(iekey==39&&s==dd[d].value.length){
      var a=(d+1)%12;
      dd[a].focus();
      four_s(0,dd[a])
      return false;
     }//if
  }//if
 }
}
//--> 
</script>

Answer 4

var ListCss = "<style type=text/css>"
+ " .txt{"
+ " font-size:12px;"
+  "}"
+  ".tl-border{"
+  " border-top:1px solid #cccccc;"
+  " border-left:1px solid #cccccc;"
+  "}"
+  "input{"
+  " width:expression((this.type=='text')?'100%':'') ;"
+  " border-width:expression((this.type=='text')?'1px':'') ;"
+  " border-color:expression((this.type=='text')?'#cccccc':'') ;"
+  " border-style:expression((this.type=='text')?'solid':'') ;"
+  "}"
+  "select{"
+  " width:100% ;"
+  "}"
+"</style>" ;
window.document.write(ListCss) ;/*********************列表类***************************/
var list = { HeadXML: {},
obj: {},
create: function(Parent){

//解析传入XML串
var XmlDoc = new ActiveXObject('Microsoft.XMLDOM');
XmlDoc.async = false;
XmlDoc.loadXML(this.HeadXML);
var XMLDomNode = XmlDoc.getElementsByTagName("Row") ;

//创建表格对象
var StrHTML = "<TABLE cellSpacing=0 cellPadding=0 width=100% border=0 id=MainTable class=txt>" 
+ "   <TR bgColor=#ccddee height=20 align=center>" ;
for (var i=0 ;i<XMLDomNode.length ;i++)
{
StrHTML += "    <TD class='tl-border' width='"+ XMLDomNode[i].getAttribute("Width") +"' value='"+ XMLDomNode[i].childNodes(0).xml +"'>"+ XMLDomNode[i].getAttribute("Test") +"</TD>" ;
}
StrHTML += "      </TR>" 
+  "   </TABLE>" ;

Parent.innerHTML = StrHTML ;

//获取表格对象,并作为类的全局属性
this.obj = document.getElementById("MainTable") ;
this.add() ;
},
add: function(){

//为表格添加一新行,并获取到该对象
var Row = this.obj.insertRow() ;
Row.align = "center" ;
var Len = this.obj.childNodes(0).childNodes(0).childNodes.length ;
var Col ,Inp ;

//为该行添加列及内容
for (var i=0 ; i<Len ;i++)
{
Col = Row.insertCell();
Inp = this.obj.childNodes(0).childNodes(0).childNodes(i).value ;
Col.innerHTML = Inp ;
Col.innerHTML = Col.innerHTML.replace("</ITEM>" ,"") ;

//若是单选按钮,那么为其添加onclick事件
for (var j=0 ; j<Col.childNodes.length ; j++)
{
if (Col.childNodes(j).type == "radio")
{
this.eve(Col.childNodes(j) ,"onclick" ,this.rad , Col.childNodes) ;
}
}

//若是本行的最后一个,那么为其添加增行的方法
if (i == Len - 1)
{
this.eve(Col.childNodes(0) ,"onkeydown" , this.e13 , i ,1)
}
else
{
this.eve(Col.childNodes(0) ,"onkeydown" , this.e13 , i ,0)
} }

this.obj.rows(this.obj.rows.length-1).childNodes(0).childNodes(0).focus();
},
e13: function(thisobj , index ,sn)
{
//回车键
if(event.keyCode == 13)
{
if (sn == 1)
{
if(thisobj.parentNode.parentNode.nextSibling == null)
{
list.add();
}
else
{
thisobj.parentNode.parentNode.nextSibling.childNodes(0).childNodes(0).focus();
}
}
else
{
thisobj.parentNode.nextSibling.childNodes(0).focus();
}
}
//左方向键
if(event.keyCode == 37)
{
new ActiveXObject("WScript.Shell").sendKeys("+{TAB}");
}
//右方向键
if(event.keyCode == 39)
{
event.keyCode = 9 ;
}
//上方向键
if(event.keyCode == 38)
{
if(thisobj.parentNode.parentNode.previousSibling.previousSibling != null)
{
thisobj.parentNode.parentNode.previousSibling.childNodes(index).childNodes(0).focus();
}
}
//下方向键
if(event.keyCode == 40)
{
if(thisobj.parentNode.parentNode.nextSibling != null)
{
thisobj.parentNode.parentNode.nextSibling.childNodes(index).childNodes(0).focus();
}
}
},
eve: function(obj, ex , func ,i ,sn){

obj.setAttribute(
ex ,
function(){
return func(obj , i , sn) ;
}
) ;
},
rad: function(thisobj ,objs){

for (var i=0 ; i<objs.length ; i++)
{
if(objs(i).type == "radio")
{
objs(i).checked = false ;
}
}

thisobj.checked = true ;
}
}/******************************调用例子*********************************<div id="Main"></div><script language="JavaScript">var InXML ;
    InXML = "<Data>"
          + "   <Row Test='文本信息' Width='170' >"
          + "       <input type='text'/>"
          + "   </Row>"
          + "   <Row Test='用户类型' Width='170' >"
          + "       <select>"
          + "           <option value='aaa'>aaa</option>"
          + "           <option value='bbb'>bbb</option>"
          + "           <option value='ccc'>ccc</option>"
          + "       </select>"
          + "   </Row>"
          + "   <Row Test='真实姓名' Width='170' >"
          + "       <input type='checkbox'/>真实姓名"
          + "   </Row>"
          + "   <Row Test='用户性别' Width='170' >"
          + "       <input type='checkbox'/>男"
          + "   </Row>"
          + "   <Row Test='用户地区' Width='170' >"
          + "       <input type='radio'/>北京<input type='radio'/>河南"
          + "   </Row>"
          + "   <Row Test='用户邮箱' Width='174' >"
          + "       <input type='text'/>"
          + "   </Row>"
          + "</Data>"list.HeadXML = InXML ;
list.create(document.getElementById("Main"));</script>******************************调用例子*********************************/

Answer 5

问题的核心是:焦点转移功能的实现
思路
1,定义一个焦点转移函数,
2,在对象的onkeypress事件上判断按键,向左则左移动焦点,向右则右移动焦点

Answer 6

www.xumv.com//修改
<table id="myGrid" border='1'>      
<tr>   
<td><input type="text" value="测试d用" /></td><td><input type="text" value="测d试用" /></td><td><input type="text" value="测asf试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测试q用" /></td><td><input type="text" value="abcdefg" /></td><td><input type="text" value="测as试用" /></td>   
</tr>   
<tr>   
<td><input type="text" value="测ds用" /></td><td><input type="text" value="测试用" /></td><td><input type="text" value="测试ss用" /></td>   
</tr>
<tr>   
<td><input type="text" value="测dd试用" /></td><td><input type="text" value="测s试dd用" /></td><td><input type="text" value="测试sg用" /></td>   
</tr>        
</table> 
<script language="JavaScript">
<!--
var dd=document.getElementById("myGrid").getElementsByTagName("input");//获取表单对象
 for(var i=0;i<dd.length;i++){
  dd[i].onkeydown =four(i);
 }//for让每次表单都有键盘按下事件
//使光标在表单最前还是最后函数
function four_s(d,ojb){ 
var r =ojb.createTextRange();//获取表单对象
r.moveStart('character',d);//移动光标 d什么位置
r.collapse(true);
r.select();
}
//键盘按下的函数 d是传过来的是哪个表单
function four(d){
 return function(){
 var iekey=event.keyCode; //获取你键盘按下的的什么键（得到数字）
   //alert(iekey) ;
  //如果是上下
  if(iekey==38||iekey==40){
   var a=d+(iekey-39)*3;//设置移动到的位置
    //如果位置存在
    if(a>=0&&a<12){  
     dd[a].focus();}
  }//if
  //如果是左右
  if(iekey==37||iekey==39){
    //获取光标在表单的位置
    var sel=document.selection.createRange();
    sel.setEndPoint("StartToStart",dd[d].createTextRange())
    var s=sel.text.length  //获取光标在表单的位置
     if(iekey==37&&s==0){
      var a=(12+d-1)%12;
      dd[a].focus();
      four_s(dd[a].value.length,dd[a])
      return false;//操作不执行
     }//if
     if(iekey==39&&s==dd[d].value.length){
      var a=(d+1)%12;
      dd[a].focus();
      four_s(0,dd[a])
      return false;//操作不执行
     }//if
  }//if
 }
}
//--> 
</script>

Answer 7

我还是把我写的也放过来吧，我写的比较容易理解。
对了，还有一点功能没有实现：光标在文本框中的位置(即在最前和最后时才能移到另一个文本框中)。楼主试一下就知道了。
<html>
<head>
<script type="text/javascript">
//索引，全局变量
var text_ind;
function of(text_index){
text_ind = text_index;
}

function okd(text_value){
var code_value = event.keyCode;
var next_name;
var flag = false;
//判断按键是否为 -->
if(code_value==39){
  //如果光标所在位置不是最后一个文本框
if(text_ind!=8){
flag = true;
next_name = "t"+(text_ind+1);
}
}

//判断按键是否为 <--、
if(code_value==37){
if(text_ind != 0){
flag = true;
next_name = "t"+(text_ind-1);
}
}

//判断按键是否为 向上键
if(code_value==38){
//如果光标所在位置不是在第一行!
if(text_ind!=0 && text_ind!=1 && text_ind!=2){
flag = true;
next_name = "t"+(text_ind-3);
}
}

//判断按键是否为 向下键
if(code_value==40){
if(text_ind!=6 && text_ind!=7 && text_ind!=8){
flag = true;
next_name = "t"+(text_ind+3);
}
}
if(flag){
document.getElementById(next_name).focus();
}
}
</script>
</head>
<body>
<table align="center" width="100" height="50">
<!-- 下面的函数of()中传递的是索引(第几个文本框)；函数okd()中传递的是text的值 -->
<tr>
<td> <input type="text" value="111" id="t0" onfocus="of(0)" onkeydown="okd('111')"/></td>
<td> <input type="text" value="222" id="t1" onfocus="of(1)" onkeydown="okd('222')"/> </td>
<td> <input type="text" value="333" id="t2" onfocus="of(2)" onkeydown="okd('333')"/> </td>
</tr>
<tr>
<td> <input type="text" value="444" id="t3" onfocus="of(3)" onkeydown="okd('444')"/> </td>
<td> <input type="text" value="555" id="t4" onfocus="of(4)" onkeydown="okd('555')"/> </td>
<td> <input type="text" value="666" id="t5" onfocus="of(5)" onkeydown="okd('666')"/> </td>
</tr>
<tr>
<td> <input type="text" value="777" id="t6" onfocus="of(6)" onkeydown="okd('777')"/> </td>
<td> <input type="text" value="888" id="t7" onfocus="of(7)" onkeydown="okd('888')"/> </td>
<td> <input type="text" value="999" id="t8" onfocus="of(8)" onkeydown="okd('999')"/> </td>
</tr>
</table>
</body>
</html>

Answer 8

好了，楼主，我搞定了。
<html>
<head>
<script type="text/javascript">
//索引，全局变量
var text_ind;
function of(text_index){
text_ind = text_index;
}

function okd(text_value){
var code_value = event.keyCode;
var next_name;
var flag = false;

var rng = document.selection.createRange();
rng.moveStart("character",-document.getElementById("t"+text_ind).value.length);
var gb_index = rng.text.length;

//判断按键是否为 -->
if(code_value==39){
  //如果光标所在位置不是最后一个文本框,
  //当光标不是最后一个且光标是在文本值最后时发生
if(text_ind!=8 && gb_index==3){
flag = true;
next_name = "t"+(text_ind+1);
}
}

//判断按键是否为 <--、
//当光标不是最后一个且光标是在文本值最前时发生
if(code_value==37){
if(text_ind !=0 && gb_index==0){
flag = true;
next_name = "t"+(text_ind-1);
}
}

//判断按键是否为 向上键
if(code_value==38){
//如果光标所在位置不是在第一行!
if(text_ind!=0 && text_ind!=1 && text_ind!=2){
flag = true;
next_name = "t"+(text_ind-3);
}
}

//判断按键是否为 向下键
if(code_value==40){
if(text_ind!=6 && text_ind!=7 && text_ind!=8){
flag = true;
next_name = "t"+(text_ind+3);
}
}
if(flag){
document.getElementById(next_name).focus();
}
}
</script>
</head>
<body>
<table align="center" width="100" height="50">
<!-- 下面的函数of()中传递的是索引(第几个文本框)；函数okd()中传递的是text的值 -->
<tr>
<td> <input type="text" value="111" id="t0" onfocus="of(0)" onkeyup="okd('111')"/></td>
<td> <input type="text" value="222" id="t1" onfocus="of(1)" onkeyup="okd('222')"/> </td>
<td> <input type="text" value="333" id="t2" onfocus="of(2)" onkeyup="okd('333')"/> </td>
</tr>
<tr>
<td> <input type="text" value="444" id="t3" onfocus="of(3)" onkeyup="okd('444')"/> </td>
<td> <input type="text" value="555" id="t4" onfocus="of(4)" onkeyup="okd('555')"/> </td>
<td> <input type="text" value="666" id="t5" onfocus="of(5)" onkeyup="okd('666')"/> </td>
</tr>
<tr>
<td> <input type="text" value="777" id="t6" onfocus="of(6)" onkeyup="okd('777')"/> </td>
<td> <input type="text" value="888" id="t7" onfocus="of(7)" onkeyup="okd('888')"/> </td>
<td> <input type="text" value="999" id="t8" onfocus="of(8)" onkeyup="okd('999')"/> </td>
</tr>
</table>
</body>
</html>