JavaScript中onblur和onfocus事件如何详细应用？

本文共计968个文字，预计阅读时间需要4分钟。

在HTML页面中，诸如按钮、文本框等可视元素都可能存在拥有和失去焦点的事件。这些事件在鼠标或键盘操作时触发，并可以执行预先设定的操作。例如，文本框在获得焦点时（onfocus）或失去焦点时（onblur）会触发相应的事件。

简单来说，onfocus事件在元素获得焦点时触发，而onblur事件则在元素失去焦点时触发。这两个事件可以用来实现各种功能，比如验证用户输入的数据、自动填充内容或执行其他逻辑。

        html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。

一. onfocus（获得焦点事件）

当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。

以下的文本框，当鼠标指针移过去时，里面的文字全部被选中：

请输入网址

这是怎么做的呢？看以下代码及解释：

<input type="text"name="url" value="www.gxblk.com" size="30"οnmοusemοve="this.focus();this.select();">

代码里，input标签内嵌入了onmousemove（鼠标指针经过）事件的JS语句，其等号后面的this.focus()意为其自身获得焦点；获得焦点的标志是该文本框内将出现输入光标，但要让其内的文字全部被选中，我们还得用上this.select()语句，它的意思就是选中全部文本框里的文字。