JS的键盘光标移动
0
悬赏园豆：20
[已关闭问题]
关闭于 2013-04-10 12:56
<!DOCTYPE html> <html> <script src="../../Scripts/jquery-1.7.1.min.js"></script> <style type="text/css"> td { border: 1px #ff0000 solid; } </style> <script type="text/javascript" language="javascript"> $(function () { $(":text").focus(function () { this.select(); }); }); document.onkeydown = function () { if (event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40 || event.keyCode == 13) { var td1 = document.activeElement.parentNode.parentNode; var tr1 = td1.parentNode; var t1 = ""; if (tr1.getElementsByTagName("tr").length == 0) { t1 = td1.parentNode.parentNode; } else { t1 = td1.parentNode; } var rows = t1.rows; var cells = ""; if (tr1.getElementsByTagName("tr").length == 0) { cells = tr1.cells; } else { cells = td1.cells; } var j = td1.cellIndex; if (j == undefined) { j = document.activeElement.parentNode.cellIndex; } var i = 0; if (tr1.rowIndex == undefined) { i = td1.rowIndex; } else { i = tr1.rowIndex; } var inputs = new Array(); switch (event.keyCode) { case 37: if (j - 1 < 0) return false; if (rows[i].cells[j - 1].childNodes.length != 0) { inputs = rows[i].cells[j - 1].childNodes; } break; case 38: if (i - 1 < 0) return false; if (rows[i - 1].cells[j].childNodes.length != 0) { inputs = rows[i - 1].cells[j].childNodes; } break; case 39: if (j + 1 >= cells.length) return false; if (rows[i].cells[j + 1].childNodes.length != 0) { inputs = rows[i].cells[j + 1].childNodes; } } break; case 40: if (i + 1 >= rows.length) return false; if (rows[i + 1].cells[j].childNodes.length != 0) { inputs = rows[i + 1].cells[j].childNodes; } break; case 13: if (j + 1 >= cells.length) return false; if (rows[i].cells[j + 1].childNodes.length != 0) { inputs = rows[i].cells[j + 1].childNodes; } break; } if (inputs != "") { for (var k = 0; k < inputs.length; k++) { //alert(inputs); if (inputs[k].type == "text" || inputs[k].type == "textarea" || inputs[k].type == "checkbox" || inputs[k].type == "select-one") { inputs[k].focus(); } } } } } </script> <body> <form id="form1" runat="server"> <div> <center> <table id="aa" cellpadding="0" cellspacing="0"style="border:1px solid red;" width="800"> <thead>aa</thead> <tbody> <tr> <td><div><input id="t1_1" type="text" style="width:70px" value="11" /><input id="t1_1_1" type="text" style="width:70px" value="11"/></div></td> <td><div><input id="t1_2" type="text" style="width:70px" value="12" /><input id="t1_2_2" type="text" style="width:70px" value="11"/></div></td> <td><input id="t1_3" type="text" style="width:70px" value="13" /></td> <td><select><option value="1">1</option><option value="2">2</option></select></td> <td><input type="checkbox" /></td> <td><textarea>16</textarea></td> </tr> <tr> <td><input id="t2_1" type="text" style="width:70px" onblur="a(this);" value="21" /></td> <td><select><option value="1">1</option><option value="2">2</option></select></td> <td><input id="t2_3" type="text" style="width:70px" value="23" /></td> <td><input id="t2_4" type="text" style="width:70px" value="24" /></td> <td><input id="t2_5" type="text" style="width:70px" value="25" /></td> <td><input id="t2_6" type="text" style="width:70px" value="26" /></td> </tr> <tr> <td><input id="t3_1" type="text" style="width:70px" value="31" /></td> <td><input id="t3_2" type="text" style="width:70px" value="32" /></td> <td><input id="t3_3" type="text" style="width:70px" value="33" /></td> <td><input id="t3_4" type="text" style="width:70px" value="34" /></td> <td><input id="t3_5" type="text" style="width:70px" value="3-5" /></td> <td><input id="t3_6" type="text" style="width:70px" value="3-6" /></td> </tr> <tr> <td><input id="t4_1" type="text" style="width:70px" value="4-1" /></td> <td><input id="t4_2" type="text" style="width:70px" value="4-2" /></td> <td><input id="t4_3" type="text" style="width:70px" value="4-3" /></td> <td><input id="t4_4" type="text" style="width:70px" value="4-4" /></td> <td><input id="t4_5" type="text" style="width:70px" value="4-5" /></td> <td><input id="t4_6" type="text" style="width:70px" value="4-6" /></td> </tr> </tbody> </table> </center> </div> </form> </body> </head> </html>
1） 可以使用键盘上“↑”“↓”“←”“→”以及回车键来控制表格区域中输入框的光标所在位置
a) 输入“↑”键：上移到前一行的输入框，至第一行后不能再上移；
b) 输入“↓”键：下移到下一行的输入框，至最后一行后不能再下移；
c) 输入“←”键：同行左移到前一个的输入框，至同行第一个输入框后不能再左移；
d) 输入“→”键：同行右移到后一个的输入框，至同行最后一个输入框后不能再右移；
e) 输入回车键：同行右移到后一个的输入框，至同行最后一个输入框后不能再右移。
在让一个单元格中多个文本框也实现键盘的光标移动
2） 控制表格区域中输入框获得光标后将输入框中文字变成“选择状态”，如原来输入框中文字是“1010”，获得光标后变成“1010”。
所有回答(1)
0
问题呢 ？
