问题引子:项目基本设计中要求每一个页面弹出时焦点要求在页面上第一个可以拥有焦点的控件上,基本实现如下:
          document.getelementbyid("text1").fouce(); 个人想实现共通方法,关键是要找到页面上的第一个控件。
jquery尝试实现:
           $.("input")[0].fouce();
考虑到有些控件并不一定是<input>控件 比如说select 所以失败。提问1:各位大侠,说说你们的想法,或者已经实现过的可以贴贴自己珍贵的代码,有思路的说个思路,本人会去尝试,实现后贴出代码,谢谢!
本人思路:遍历全部节点,判断控件是否可以成为焦点的控件,将空间设为焦点,返回。提问2:因为是要找到控件,遍历如何实现?
提问3:如何判断节点上控件是可以拥有焦点呢?

解决方案 »

  1.   

    设置控件的tabindex=1 
     <script   language= "javascript "> 
    function   window.onload() 

        document.getElementById( "YourControlID ").focus(); 

    </script> 
    遍历太麻烦了吧?
      

  2.   


    我说得是共通方法,依照你说的代码我在问题中已经实现过了,
    假设项目有500张页面那么是不是每张页面都要找到第一个控件的YourControlID ?
    如果需求发生改变,就要修改500张页面?
      

  3.   

    也可以用jquery呀,你给所有你需要让他判断谁第一个出现的元素都加上一个样式,然后$(".ctrl")不就可以得到全部了吗,然后就用索引也可以的
      

  4.   


    $(function(){
    $("input,select,textarea,button").eq(0).focus();
    })
      

  5.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="jquery-1.2.6.js"></script>
    <script type="text/javascript">
    $(function(){
    var i,tt,left,top,num;
    $.each($("input,select,textarea,button"),function(i,tt){
    var offset=$(this).offset();
    var height=$(this).height();
    if(i==0){
    top=offset.top;
    left=offset.left;
    num=i;
    }else{
    if((offset.top+height)<top){
    top=offset.top;
    left=offset.left;
    num=i;
    }else if(offset.left<left){
    top=offset.top;
    left=offset.left;
    num=i;
    }
    }
    })
    $("input,select,textarea,button").eq(num).focus();
    $("select").focus(function(){
    $(this).css("background","gray");
    })
    })
    </script>
    </head><body>
    <select>
    <option>dd</option>
    </select>
    <textarea rows="12" cols="5">sss</textarea>
    <button value="click ME">fdf</button>
    <input type="text"/>
    </form>
    </body>
    </html>