不惜血本再开一200(两贴共350分)分贴--如何实现方向键控制页面的输入焦点(左方向键--焦点回退，右方向键--焦点前进)

谢谢稻草人的回复，这个方法我也试过，但遇到一个隐藏div时就同样抱错。
<div style="display:none">
<input type="text">
</div>
是否有一个属性或其他方式能判断某个HTML对象是否可以执行focus()方法

加了一个函数function backFocus(obj){
  var i=obj.sourceIndex - 1;
  if(i <= 0) return;
  var p = document.all(i);  if(p && p.tagName == "INPUT" && p.disabled == false && isVisible(p))
p.focus();
  else
backFocus(p);
}
function isVisible(o){
while(o)
{
if(o.tagName){
if(o.currentStyle.display == "none" || o.currentStyle.visibility == "hidden")
{
return false;
}
}
o = o.parentNode;
}
return true;
}

做个错误异常处理就可以了function backFocus(obj){
  var i=obj.sourceIndex - 1; //直接取目标对象序号
  view.innerHTML = '';
  while(document.all(i).tagName!="BODY") {
    try {
      document.all(i).focus();
    }catch(e) {
      i--;
    }
  }
}
这个函数修改的与在你上一贴中回复的不太一样
考虑到实际上情况还要复杂的多，所以仍需要进一步修改。但思路是一致的

很簡單的一題呀,開這麼多分.有倒分賺疑.onkeypress
GetItemByTagName
再聚焦一下,就好了呀.

<html>
<body >
<form name="frm" >
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" disabled value=disabled >
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
</form >
</body>
<script language="javascript">
var tabKeyContainer=document.frm;function setDescTabIndex()
{
var elementObjs=tabKeyContainer.elements;
var tempTabIndex=1;
for(var i=elementObjs.length-1;i>-1 ;i--) {
elementObjs[i].tabIndex=tempTabIndex++;
}
// 以下三句是为ie的某些bug而加
var tempInput=document.createElement("<input type=hidden>");
tabKeyContainer.appendChild(tempInput);
tempInput.removeNode(true);
}
function clearTabIndex()
{
var elementObjs=tabKeyContainer.elements;
for(var i=elementObjs.length-1;i>-1;i--) elementObjs[i].removeAttribute("tabIndex");
}
function documentKeyDown(){
    var SrcElement;
    SrcElement = window.event.srcElement;
    if(window.event.keyCode == 13 && SrcElement.type!="button" && SrcElement.type!="textarea" ){
      //回车键替换Tab
      window.event.keyCode = 9;
    }else if(window.event.keyCode==37){
      //右方向键
      setDescTabIndex();
      window.event.keyCode=9;
  setTimeout("clearTabIndex()",1)
    }else if(window.event.keyCode==39){
      //右方向键
      window.event.keyCode=9;
    }
}document.onkeydown=documentKeyDown;</script></html>

有个建议,在你需要输入的所有的Input,Name 或者 ID 加个前缀,
这样就好判断这个东西是否是可以输入,并且是你需要输入的input
使用TagName提取出名称说句实在话,我用了这么久,没有在网络上见过楼主这样的功能,
但这个需求由来已久,很多人略过而已.支持搂主
希望写成功后发个copy给我,或者我们还可以交流[email protected]

另外，想说的是：
在input里/textarea里，左右键本身就是有用的，并且使用频率远远大于tab键，
用左右键来实现tab和shift+tab的功能，会丧失掉这些功能，
如果某个不知道使用tab键的客户要求这样做，
那就得尝试说服他：不能因为满足他的一点创意而让更多的用户有损失。如果我们拿excel当榜样
请注意，excel并没有实现“在单元格里左右键当tab键用”，
就算是单元格里内容全选或光标在内容的最前面或最后面的时候，也没有实现“在单元格里左右键当tab键用”，
excel只是加了一个整个单元格的选择的功能（选择整个单元格，还没有到单元格里面去）
只是在这个时候，左右键类似于tab键。

正确答案是
JK_10000(JK) ( ) 信誉：121
测试通过

还有,一般我们在做多记录输入时候,是用Table控制input的显示,
而且,更多情况,需要支持左右键和上下键.而且里面不单纯是input,还有其他描述的标签,
所以,如果要实现通用的,JK_10000(JK)的例子还需要改进.

"而且,更多情况,需要支持左右键和上下键.而且里面不单纯是input,还有其他描述的标签"
-------左右键在input-text里有用，所以强烈建议抵制“左右键来实现tab和shift+tab的功能”
上下键对select/textarea已经有用，
在input里倒是可以支持，见以下示例：
---------------
动态明细示例
http://jkisjk.spaces.live.com/blog/cns!758CACE25E89DD3B!377.entry

JK 独钓寒江雪
左右键在input-text里有用，所以强烈建议抵制“左右键来实现tab和shift+tab的功能”
上下键对select/textarea已经有用，
------------------------------------------------
支持,除非特殊情况特殊用.
呵呵..

<html>
<body >
<form name="frm" >
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" disabled value=disabled >
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
<input type="text" value=test>
</form >
</body>
<script language="javascript">
var tabKeyContainer=document.frm;function setDescTabIndex()
{
var elementObjs=tabKeyContainer.elements;
var tempTabIndex=1;
for(var i=elementObjs.length-1;i>-1 ;i--) {
elementObjs[i].tabIndex=tempTabIndex++;
}
// 以下三句是为ie的某些bug而加
var tempInput=document.createElement("<input type=hidden>");
tabKeyContainer.appendChild(tempInput);
tempInput.removeNode(true);
}
function clearTabIndex()
{
var elementObjs=tabKeyContainer.elements;
for(var i=elementObjs.length-1;i>-1;i--) elementObjs[i].removeAttribute("tabIndex");
}
function documentKeyDown(){
    var SrcElement;
    SrcElement = window.event.srcElement;
    if(window.event.keyCode == 13 && SrcElement.type!="button" && SrcElement.type!="textarea" ){
      //回车键替换Tab
      window.event.keyCode = 9;
    }else if(window.event.keyCode==37){
      //右方向键
      setDescTabIndex();
      window.event.keyCode=9;
  setTimeout("clearTabIndex()",1)
    }else if(window.event.keyCode==39){
      //右方向键
      window.event.keyCode=9;
    }
}document.onkeydown=documentKeyDown;</script></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title> - http://www.never-online.net </title>
    <meta http-equiv="ImageToolbar" content="no" />
    <script type="text/javascript">
    //<![CDATA[
function tabDemo() {
  var doc_all = document.getElementsByTagName("*");
  var curtEl = event.srcElement;
  var nKeycode = event.keyCode;
  if (nKeycode==39) { doit(1); return; }
  else if (nKeycode==37) { doit(-1); return; }
  function doit(n) {
    for (var i=0; i<doc_all.length; i++) {
      if (curtEl==doc_all[i]) {
        try {
          var j = i+(n);
          j>=doc_all.length?j=doc_all.length-1:j<0?j=0:"";
          doc_all[j].focus();
        }  catch(ex) {
          n>0?doit(n+1):doit(n-1);
          break;
        }
      }
    }
  }
}
document.onkeydown=tabDemo;
    //]]>
    </script>
  </head>  <body id="www.never-online.net">
<input/>
<input disabled=true value='disabled'/>
<input disabled=true value='disabled'/>
<input/>
<input/>
<textarea></textarea>
  </body>
</html>

只要用js写段代码就行了,当键按下(onKeyDown)触发该函数。函数用event.keyCode和ASCII码

BlueDestiny的跟贴有些bug(例如中间插一个<br>会有问题，右向键借用tab键的话似乎更体贴)，
JK的跟贴会损失^Z的功能，效率也有待改进，
xuzuning的贴贴把ie跑死了(不知是不我我跑错了代码)，
ice_berg16的方法似乎实现不了select()的功能，改了一下没实现，可能得加些代码来处理ie的这个bug。

<html>
<body><form>
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br></form>
</body></html><script language="javascript">
function documentKeyDown(){
    var srcElementObj = window.event.srcElement;
    if(srcElementObj.tagName != "INPUT" && srcElementObj.tagName != "SELECT" ) return;
    if(window.event.keyCode==37){
     //左方向键
     backFocus(event.srcElement);
     event.returnValue=false;
    }else if(window.event.keyCode==39){
     //右方向键
     window.event.keyCode=9;
    }
}
function backFocus(obj){
var elementObjs=obj.form.elements;
var startToTryFocus=false;
for(var i=elementObjs.length-1;i>-1 ;i--) {
if(startToTryFocus){
try{
elementObjs[i].focus();
elementObjs[i].select();
break;
}
catch (ex){}
}
else{
if(elementObjs[i]==obj)startToTryFocus=true;
}
}
}
document.onkeydown=documentKeyDown;</script>

兼容非IE浏览器：<html>
<body><form name="mm">
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<span style="display: none"><input/></span></form>
</body></html><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

兼容非IE，且听从JK的教诲，加上 select() 效果：<html>
<body><form name="mm">
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<span style="display: none"><input/></span></form>
</body></html><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

刚才 JK 测试出在 radio 和 checkbox 时 select() 有BUG，且在 readOnly 的时候也有BUG，所以再改之：
<html>
<body><form name="mm">
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<input type="text" value="test" readonly >
<input type="text" value="test" >
<input type="radio" />
<input type="text" value="test" >
<input type="text" disabled value="disabled" >
<input type="text" > <br>
<span style="display: none"><input/></span></form>
</body></html><SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

楼主不妨换一换思路  以下程序经测试有效。
<html>
<body>
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" disabled>
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
<input type="text" >
</body>
<script language="javascript">
function documentKeyDown(){
    var SrcElement;
    SrcElement = window.event.srcElement;
    if(window.event.keyCode == 13 && SrcElement.type!="button" && SrcElement.type!="textarea" ){
    }else if(window.event.keyCode==37){
    //左方向键
    getPreInput(event.srcElement);
    }else if(window.event.keyCode==39){
    //右方向键
getNextInput(event.srcElement);
    }
}var inputFormA=document.getElementsByTagName('input');
var inputA=[];
for(var n=0;n<inputFormA.length;n++){
if(inputFormA[n].disabled){continue}
if(inputFormA[n].type!='text'){continue}
inputA.push(inputFormA[n]);
}
inputA[0].focus();function getNextInput(el){
var _len=inputA.length
for(var n=0;n<_len;n++){
if(el==inputA[n]){
if(n==(_len-1)){inputA[0].focus()}
else{inputA[n+1].focus();}
break;
}
}
}
function getPreInput(el){
var _len=inputA.length
for(var n=0;n<_len;n++){
if(el==inputA[n]){
if(n==0){inputA[_len-1].focus()}
else{inputA[n-1].focus();}
break;
}
}
}document.onkeydown=documentKeyDown;</script></html>

调试易

不惜血本再开一200(两贴共350分)分贴--如何实现方向键控制页面的输入焦点(左方向键--焦点回退，右方向键--焦点前进)

解决方案 »