JavaScript中onfocus与onblur事件的应用详解

onfocus与onblur事件概述

在HTML页面中，按钮、文本框等可视元素均具备获取和失去焦点的事件机制。当用户通过鼠标点击或键盘操作触发这些事件时，可以执行预设的脚本逻辑。本文将以文本框获取和失去焦点为例，简要说明onfocus和onblur事件的具体应用方式。

onfocus事件：文本框自动选中

当文本框获得焦点时，其内部文本可像“好123”网站百度搜索框那样自动全部选中。这种交互效果可以通过onfocus事件来实现。

示例中的文本框，当鼠标指针移入时，内部文字会被全部选中。

请输入网址

具体实现方式如下代码及解释所示：

<input type="text"name="url" value="http://www.gxblk.com" size="30"onmousemove="this.focus();this.select();">

代码中，input标签内嵌入了onmousemove（鼠标指针经过）事件对应的JavaScript语句。等号后的this.focus()表示使该元素自身获得焦点，表现为文本框内出现输入光标。要实现文字全部选中，还需使用this.select()语句，其作用是选中文本框内的所有文本。

onblur事件：实时表单验证

通常我们需要检测文本框是否已正确输入，检测工作多在用户点击提交按钮后进行。实际上，利用控件失去焦点的时机进行实时检测，可以让onblur事件发挥作用。

以下示例包含四个文本框。若未点击任何文本框，则无反应；但当点击其中一个使其获得焦点（出现输入光标），若未输入任何内容便点击其他地方导致其失去焦点，则会弹出警告提示。

姓名

性别

年龄

住址

表单代码

 
<form name="blur_test">
<p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

JS代码

 
<scriptlanguage="javascript">
function chkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
} 
</script>

表单代码中，每个输入框均嵌入了onblur JavaScript语句，调用后续JS代码中的自定义函数chkvalue(this)。该函数在文本框失去焦点时被触发，用于检测文本框是否为空，若为空则弹出警告窗口。函数接收一个参数（txt），对应调用时传入的this，即当前文本框元素自身。