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

ladybirds2008 2010-09-09 10:59:12
我想我的要求是很多人都见过这种效果的。。请高手给个实例，将非常感谢。。。
要求：
1. 一个界面通用的js函数 function setFocus（）{}，不能传入参数。

2. 功能：当进入一个界面时候，焦点自动停留在第一个可编辑的组件上；比如：界面全部是input输入框，当进入界面或
界面刷新时，焦点停留在第一个input上。

3. 另外注意，例如下列代码中如果 id为aa的input的父节点tr 可能是隐藏不可见的，所以聚焦是不行的，也就是说必须
的input组件才可聚焦
<BODY>
<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=""/></TD>
<TD><input type="text" id="dd" name="d1" value=""/></TD>
</TR>
<INPUT TYPE="button" id="" value="submit" onclick="setFocus()">
</TABLE>

</BODY>
[/code]

望各位大侠给予支持啊，帮忙写一个，谢谢啦。。。。路过的也帮顶一下。。有分送哦。。
...全文
222 34 打赏 收藏 转发到动态 举报
写回复
用AI写文章
34 条回复
切换为时间正序
请发表友善的回复…
发表回复
closewbq 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 20 楼 ladybirds2008 的回复:]
引用 19 楼 closewbq 的回复:
HTML code

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>Test</title>
</head>
<script>
function setFocus(){
var list=document.getElementsByTagNa……
[/Quote]

那就遍历着判断。反正肯定是能做的！
ladybirds2008 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 19 楼 closewbq 的回复:]
HTML code

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<title>Test</title>
</head>
<script>
function setFocus(){
var list=document.getElementsByTagName("input");
f……
[/Quote]哈哈 果然厉害。。但是这里还是有个问题的，如果当前节点不止有一个祖节点呢 可能有2、3、5、6或是更多呢。。还有readonly ,display ='' 情况是要过滤的
closewbq 2010-09-09
  • 打赏
  • 举报
 回复 


<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>
jack_qdb 2010-09-09
  • 打赏
  • 举报
 回复
有分送？？？...
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
参考下:
可见性选择器:

:hidden $(":hidden") 选取所有不可见的元素。包括<input type="hidden">,<div style="display:none;">,<div style="visibility:hidden;">等元素。
若只想去input元素可以$("input:hidden")
:visible $("div:visible") 选取所有可见的<div>元素

get(0)就返回第一个元素
猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
$("table tr:visible input[type='text']").get(0).focus();
JerryZhou_ 2010-09-09
  • 打赏
  • 举报
 回复
帮顶一下。。有分送？？？
ladybirds2008 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 13 楼 soli11722984 的回复:]
。。。。。。。
其实我意思就是在INPUT里面多加几个CLASS，然后JQUERY可以很容易就找到，再然后就设置返回的数组的第一个去拿到焦点就好

不写了，我看着就已经觉得够烦了
[/Quote]汗。。。。
soli11722984 2010-09-09
  • 打赏
  • 举报
 回复
。。。。。。。
其实我意思就是在INPUT里面多加几个CLASS，然后JQUERY可以很容易就找到，再然后就设置返回的数组的第一个去拿到焦点就好

不写了，我看着就已经觉得够烦了
ladybirds2008 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 soli11722984 的回复:]
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> ][/Quote] 有点思路。。。。嘿嘿。。。你也帮着写写测一个哈。。谢谢。。
young_smile 2010-09-09
  • 打赏
  • 举报
 回复 


吃完饭来公布答案.

要不来看大牛的答案.

猿敲月下码 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 ladybirds2008 的回复:]
引用 5 楼 young_smile 的回复:
JScript code

var inputArr = document.getElementByTagName('input');

inputArr[0].focus();

使用jquery更简单.
$('input').first().focus();
这个当然可以，但是存在一个问题就是，如果inputArr[0]的父节点……
[/Quote]

实现判断下就可以啦~
soli11722984 2010-09-09
  • 打赏
  • 举报
 回复
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> ]
zhouyu2005 2010-09-09
  • 打赏
  • 举报
 回复
那就在inputArr[0].focus();之前用个if判断一下
ladybirds2008 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 young_smile 的回复:]
JScript code

var inputArr = document.getElementByTagName('input');

inputArr[0].focus();

使用jquery更简单.
$('input').first().focus();
[/Quote]这个当然可以，但是存在一个问题就是，如果inputArr[0]的父节点或祖上节点是style="display:none"的话，聚焦是不可行的，是脚本错误的，要过滤掉这种情况的。。请大侠再考虑下。。谢谢哦。。
zhouyu2005 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 ladybirds2008 的回复:]
一个通用的函数，要适合不同的界面。。。
[/Quote]
你的意思是不同界面的<input>的id值都不同？
young_smile 2010-09-09
  • 打赏
  • 举报
 回复 


var inputArr = document.getElementByTagName('input');



inputArr[0].focus();



使用jquery更简单.

$('input').first().focus();
完美灬缺陷 2010-09-09
  • 打赏
  • 举报
 回复
帮顶一下。。有分送？？？
ladybirds2008 2010-09-09
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 zhouyu2005 的回复:]
JScript code

function onload()
{
var ctrl = document.getElementById("aa");
ctrl.focus();
}
[/Quote]一个通用的函数，要适合不同的界面。。。
soli11722984 2010-09-09
  • 打赏
  • 举报
 回复
已经死在JS手上很多次也很久了
加载更多回复（13）
纯JS实现的焦点图代码
左右切换的焦点图代码，省去了修改flash的烦恼，方便易改
JS超炫切换效果焦点图代码
JS超炫切换效果焦点图代码，兼容各种主流浏览器，站长素材库推荐下载！ 使用方法： 1、依次引入slideshow.css与slideshow.js文件； 2、复制代码到页面中即可。 3、因效果过于复杂，导致slideshow.js文件达到了255KB的大小，可使用js压缩工具压缩至84KB左右。
初级学软件之JavaScript语言第二季
主要课程内容：第一讲 事件与事件处理第二讲 鼠标事件第三讲 键盘事件 第四讲 页面事件第五讲 焦点事件 第六讲 表单提交和重置事件第七讲 文本编辑事件
js 禁用只读文本框获得焦点时的退格键
有时候难免会要用到只读的文本框,可今天发现只读文本框有一个缺陷,当鼠标焦点在文本框里面的时候按回退键(backSpace), 会退回到前一个页面,这个问题就有点烦恼了,用户又不清楚可不可以输入,他如果看到文本框想去改里面的东西,按一下,有可能前面所有填写的数据就会丢失.故此写了个方法,供大伙有需要时放入[removed][removed],保管你称心如意。 代码如下:document.documentElement.onkeydown = function(evt){ var b = !!evt, oEvent = evt || window.event; if (oEvent.keyCode
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
本文实例讲述了JS实现滑动菜单效果代码。分享给大家供大家参考。具体如下： 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来，有些同志曾经为同一个页面布置两个滑动门而烦恼，参考一下本例子，相信你会找到答案，而且有各种排列方式的选项卡，总有一款会满足你。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3
Java EE

67,513

社区成员

225,879

社区内容

发帖
与我相关
我的任务
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器，保护我们的业务核心组件（中间件），以延续它的生命力，而不是依赖J2SE/J2EE版本。
社区管理员
  • Java EE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章