【烦恼中】【100分一个关于“焦点”的js问题】

var inputArr = document.getElementByTagName('input');inputArr[0].focus();使用jquery更简单.
$('input').first().focus();

你的意思是不同界面的<input>的id值都不同？

这个当然可以，但是存在一个问题就是，如果inputArr[0]的父节点或祖上节点是style="display:none"的话，聚焦是不可行的，是脚本错误的，要过滤掉这种情况的。。请大侠再考虑下。。谢谢哦。。

那就在inputArr[0].focus();之前用个if判断一下

selector1,selector2,selectorN
概述
将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。参数
selector1Selector一个有效的选择器selector2Selector另一个有效的选择器selectorN (可选)Selector任意多个有效选择器示例
描述:
找到匹配任意一个类的元素。HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>jQuery 代码:
$("div,span,p.myClass")结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

。
其实我意思就是在INPUT里面多加几个CLASS，然后JQUERY可以很容易就找到，再然后就设置返回的数组的第一个去拿到焦点就好不写了，我看着就已经觉得够烦了

$("table tr:visible input[type='text']").get(0).focus();

参考下:
可见性选择器::hidden $(":hidden") 选取所有不可见的元素。包括<input type="hidden">,<div style="display:none;">,<div style="visibility:hidden;">等元素。
若只想去input元素可以$("input:hidden")
:visible $("div:visible") 选取所有可见的<div>元素get(0)就返回第一个元素

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
    <title>Test</title>
</head>
<script>
function setFocus(){
  var list=document.getElementsByTagName("input");
  for(var i=0;i<list.length;i++){
if(!list[i].disabled&&list[i].parentNode.style.display!="none"&&list[i].parentNode.parentNode.style.display!="none"){
          list[i].focus();
          return;
      }
  }
}
</script>
<body onload="setFocus();">
<TABLE>
<TR style="display:none">
<TD><input type="text" id="aa" name="a1" value=""/></TD>
<TD><input type="text" id="bb" name="b1" value=""/></TD>
</TR>
<TR>
<TD><input type="text" id="cc" name="c1" value="" disabled="disabled"/></TD>
<TD><input type="text" id="dd" name="d1" value=""/></TD>
</TR>
</TABLE>
</body>
</html>

哈哈果然厉害。。但是这里还是有个问题的，如果当前节点不止有一个祖节点呢可能有2、3、5、6或是更多呢。。还有readonly ,display ='' 情况是要过滤的

功能：当进入一个界面时候，焦点自动停留在第一个可编辑的组件上；比如：界面全部是input输入框，当进入界面或界面刷新时，焦点停留在第一个input上。
用刷新，刷新前鼠标点在其他地方，刷新后就没有聚焦在控件上了。

吧jQuery包拷贝到工程下面，在界面导入jQuery包
在js里写：
function onload()
{
   //第一种
   $('input').first().focus();

   //第二种
    document.getElementByTagName('input').focus();
}

这个实现共能，是常常见的一个。这个功能真的很烦，我最讨厌写js啦，很排斥根本就不是逻辑上的问题，这全是js上的细节点，烦死

刚才搜索到个currentStyle用这个可以获得到内部元素继承自外部元素的样式我现在没时间实验你自己实验下把

在focus()前使用 $("#p input").is(":hidden") 判断一下就可了。
这个函数能正常的判断出元素是否是显示的，如果父元素是隐藏的，返回就是true。

楼上已经说了正确的思路了，闲来无事写了一个，顺便也是帮自己写一个，项目中还是应该用的：//页面onload加载处理
$(document).ready(function () {
//获取所有文本框对象
var text = $("input[type='text']");
//考虑到如果只有一个文本框的情况，text是没有length的
if(text.length == undefined) {
//如果当前文本框的全部父节点都没有隐藏的情况，当前文本框获取焦点并结束
if(isAllShow(text)) {
text.eq(i).focus();
return;
}
} else {
for(var i = 0; i < text.length; i++) {
//如果当前文本框的全部父节点都没有隐藏的情况，当前文本框获取焦点并结束
if(isAllShow(text.eq(i))) {
text.eq(i).focus();
return;
}
}
}
});

//判断当前文本框的所有父节点是否有隐藏的
function isAllShow (text) {
var parents = text.parents();
var isShow = true;
for(var j = 0; j < parents.length; j++) {
if(parents.eq(j).is(":hidden")) {
isShow = false;
break;
}
}
return isShow;
}

楼上第9行代码改一下：
text.eq(i).focus(); --> text.focus();
还是JQUERY比较方便

还是错了，怎么贴错代码了，贴成第一版的了，再发一下： //页面onload加载处理
$(document).ready(function () {
//获取所有文本框对象
var text = $("input[type='text']");
//考虑到如果只有一个文本框的情况，text是没有length的
if(text.length == undefined) {
//如果当前文本框不是隐藏、只读或不可用的状态并且该文本框的全部父节点都没有隐藏的情况，当前文本框获取焦点并结束
if(!text.is(":hidden") && text.attr("readonly") == false && text.attr("disabled") == false && isAllShow(text)) {
text.focus();
return;
}
} else {
for(var i = 0; i < text.length; i++) {
//如果当前文本框不是隐藏、只读或不可用的状态并且该文本框的全部父节点都没有隐藏的情况，当前文本框获取焦点并结束
if(!text.is(":hidden") && text.attr("readonly") == false && text.attr("disabled") == false && isAllShow(text.eq(i))) {
text.eq(i).focus();
return;
}
}
}
});

//判断当前文本框的所有父节点是否有隐藏的
function isAllShow (text) {
var parents = text.parents();
var isShow = true;
for(var j = 0; j < parents.length; j++) {
if(parents.eq(j).is(":hidden")) {
isShow = false;
break;
}
}
return isShow;
}

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
    <title>Test</title>
</head>
<script>
function setFocus()
{
   var list=document.getElementsByTagName("input");
  for(var i=0;i<list.length;i++){
if(!list[i].disabled){

var tempObject=returnInput(list[i]);

if(tempObject!=null)
{
    list[i].focus();
          return;
}

      }
  }}function returnInput(element)
{ if(element == null)
{
return null;
}
if (typeof(element) != "object")
{
return null;
}

if(element.tagName == 'BODY')
{

     return element;
  }

  if(element.style.display!="none")
  {
     return returnInput(element.parentNode);
  }return null;

}
</script>
<body onload="setFocus();">
<TABLE>
<TR style="display:none">
<TD><input type="text" id="aa" name="a1" value=""/></TD>
<TD><input type="text" id="bb" name="b1" value=""/></TD>
</TR>
<TR>
<TD><input type="text" id="dd" name="d1" value=""/></TD>
<TD><input type="text" id="cc" name="c1" value="" disabled="disabled"/></TD></TR>
</TABLE>
</body>
</html>
经测试,可以使用,主要实现思想是采用的递归方法returnInput
如采用,请给19楼兄弟也加下分,我的部分代码直接拷贝的他的,THX

31 楼佩服你啦，同时很谢谢你啦。。不过，你提出的那个<//考虑到如果只有一个文本框的情况，text是没有length的> 这种情况存在吗，我试验了下有一个text时候length是1，没有input时候是0

感谢大侠们问题解决集合众家之长。很感谢31楼筒靴已经投入项目使用，测试代码如下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery.js" LANGUAGE="JavaScript"></script>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD><BODY onload="init()">
<TABLE>
<TR style="display:none">
<TD><input readonly type="text" id="aa" name="a1" value=""/></TD>
<TD><input type="text" id="bb" name="b1" value=""/></TD>
</TR>
<TR>
<TD><input readonly type="text" id="cc" name="c1" value=""/></TD>
<TD style="display:none"><div ><input type="text" id="dd" name="d1" value="" /></div></TD>
<TD><input type="button" id="btn" name="btn" value="submit" /></TD>
<TD><input disabled type="text" id="dd" name="d1" value=""/></TD>
</TR>
<TR>
<TD><input readonly type="text" id="ee" name="e1" value=""/></TD>
<TD ><input type="text" id="ff" name="f1" value="" /></TD>
<TD><input readonly type="text" id="gg" name="g1" value=""/></TD>
<TD><input disabled type="text" id="hh" name="h1" value=""/></TD>
</TR>
</TABLE>
</BODY>
</HTML>

调试易

【烦恼中】【100分一个关于“焦点”的js问题】

解决方案 »