JavaScript让登录或搜索文本框自动获得焦点

!本文可能 超过1年没有更新,今后内容也许不会被维护或者支持,部分内容可能具有时效性,涉及技术细节或者软件使用方面,本人不保证相应的兼容和可操作性。

这确实是个值得注意的细节,今天在XX网站登录界面上遇到了,就先记录下来了,每个网页都有其专注的功能,有的专注于文章资讯等信息呈现,有的专注于视频播放,有的专注于登录,今天要说的就是专注于像登录或搜索等类似功能的网页,打开这一类页面,你会发现有些做得比较好的页面,输入焦点会自动落在要填写信息的第一个文本框里,这样我们就不需要再点击鼠标让此类文本框获得焦点了,这样无形中为用户减少了一步点鼠标的操作,易用性就显著增强了,当然这类效果都是由JavaScript脚本实现的,具体的实现方式也很简单,即使用Obj.focus()方法,使Obj对象获取焦点,但是在实际操作中还是有很多方面需要注意的。

首先,我们要获取文本框对象,这就注定了我们这段脚本必须在文本框渲染完成后才执行,参考多数登录框的设计方案,这类脚本一般都是放在HTML的最后部分,位置在</body>之前,这样在input加载完成后才执行脚本,避免找不到对象的问题。

其次,Obj.focus()方法需要延时调用,并不等于说我们input文本框呈现出来就可以立即设置focus焦点,大部分情况下这样做也许可以成功,但是多测试几次你会发现有时焦点并不能成功设置,这里的原因是某些浏览器在input文本框渲染完成后不能立即为文本框启用获得焦点的特性,所以我们需要做一定的延时,在JavaScript里延时的方式是通过setTimeout函数,时间设置大概在200毫秒即可(参考WordPress的后台登录)。

最后,即使我们采用延时等措施,仍然会有小几率的情况导致无法获取焦点甚至让脚本执行出错,所以我们需要用try {} catch {} 屏蔽错误,无法获取焦点是小事,脚本出错就坑爹了。下面是实现的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
 
<head>
<title>文本框获取焦点</title>
</head>
 
<body>
 
<p>
<input type="text" id="userName" />
</p>
<script type="text/javascript">
setTimeout( function(){
  try{
    document.getElementById('userName').focus();
  } catch(e){}
}, 200);
</script>
 
</body>
</html>

后来发现WP的登录页面除了focus还有select方法,原来在用户名记住的情况下,用户名文本框获得焦点后如果我们要清除原先的用户名,只有移动方向键或者使用鼠标选中然后删除,而select正好替我们做了选中这个事情,要输入就直接输入就行了,以上面的HTML为参考,具体的代码如下:

1
2
3
4
5
6
7
setTimeout( function(){
  try{
    var t = document.getElementById('userName');
    t.focus();
    t.select();
  } catch(e){}
}, 200);

END

若无特别说明,本网站文章均为原创,原则上这些文章不允许转载,但是如果阁下是出于研究学习目的可以转载到阁下的个人博客或者主页,转载遵循创作共同性“署名-非商业性使用-相同方式共享”原则,请转载时注明作者出处谢绝商业性、非署名、采集站、垃圾站或者纯粹为了流量的转载。谢谢合作!

  1. document.getElementById(‘userName’).values=”aaaa”;
    document.getElementById(‘userName’).focus();
    如果先付值,然后再获得焦点,如何让光标停留在aaaa的后面。

    • @汤
      你可以试试下面的代码:

      function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
          ctrl.focus();
          ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
          var range = ctrl.createTextRange();
          range.collapse(true);
          range.moveEnd('character', pos);
          range.moveStart('character', pos);
          range.select();
        }
      }
      setTimeout(function(){
        try{
          var username = document.getElementById('userName');
          setCaretPosition(username, username.value.length);
          username.focus();
        } catch(e){}
      }, 200);
  2. 我正在弄一个Web页面,读取扫描枪的数据,需要自动获取焦点,并且扫描枪自动提交以后,任何时刻都需要把焦点定位到固定的TextBox,这个代码挺有用,很有借鉴意义。多谢!

请稍后...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*