网页载入时和输入错误清空后文本框聚焦text focus

对于用来提交内容的网页来说，通常有多个文本框，网页载入时希望某一个或第一个文本框聚焦，也就是不需要再用鼠标点一次文本框就可以直接输入，为用户减少一次操作，这就是用户体验好的表现。

除了网页载入时聚集外，当用户输入错误提示后，聚焦文本框也非常有必要，不需要用户再单击一次文本框聚焦，就可以立即再次输入。通常在用户输入密码或验证码的时候，特别容易输错，有时可能连错几次，每次都聚焦一下显得比较麻烦。

text文本框自身不能完成聚焦，需要用 javascript 代码来操作，其实非常简单，只需要一句代码就能完成聚焦。不过有一点需要注意，文本框聚焦需要与文本框聚焦后执行事件相区别，也就是 text文本框的属性 onfocus。

一、网页载入时文本框聚焦（text focus）

html代码：

<div>
    产品名称：<input type="text" id="onfocusId" />
    产品价格：<input type="text" id="price" />
  </div>

javascript代码：

<script type="text/javascript">
    var obj = document.getElementById("onfocusId");
    obj.focus();
  </script>

以上例子仅列举了两个文本框，不管几个文本框，一次只能有一个聚焦。聚焦的 javascript 代码十分简单，首先通过 id 获取要聚焦的文本框，然后聚焦即可。不过，有一点需要注意，javascript 代码一定要放到网页载入时就要聚焦文本框的后面，否则因找不到文本框而发生错误。

二、用户输入错误清空后，文本框聚焦text focus

在日常使用中，最容易输错的就密码和验证码，并且还可能连续几次输错，每次输错之后都需要点击一下文本框，用户体验不太好，所以非常有必要自动聚焦。

html元素：

<div>
    用户名：<input type="text" id="nameId" />
    密码：<input type="password" id="passwordId" onblur="checkPwd()" />
  </div>

javascript代码：

<script type="text/javascript">
  function checkPwd() {
    var obj = document.getElementById("passwordId");
    if (obj.value != 1) {
      obj.value = "";
      obj.focus();
    }
  }
  </script>

以上代码假设密码输入不为1，则错误；单击任意空白处后触发聚焦事件 chechPwd()，随后清空文本框，然后聚焦等待用户再次输入。

三、清除文本框聚焦text focus

html元素：

<div>
    手机号码：<input type="text" id="mobleId" />
  </div>

javascript代码：

<script type="text/javascript">
  function RemoveFocusInTextbox() {
    var obj = document.getElementById("mobleId");
    obj.blur();
  }
  RemoveFocusInTextbox();//调用
  </script>