HTML | DOM onfocus 事件

在HTML文档和JavaScript中，事件是一种行为，发生在许多情况下，例如用户在网页上点击按钮或链接，或在文本框中输入内容。 onfocus事件是其中一个常用的事件，它在用户焦点落在HTML元素上时触发。

语法

onfocus事件可以在任何可以获得焦点的HTML元素上使用，例如<input>、<textarea>、<select>等。当用户选择一个元素并使其成为焦点时，事件将触发。以下是使用onfocus事件的语法：

<element onfocus="myFunction()">

以上代码中，element是要使用onfocus事件的HTML元素，myFunction()是JavaScript函数名称。

示例

下面是一个简单的示例，演示如何使用onfocus事件：

<input type="text" onfocus="myFunction()">

当用户点击文本框并将焦点放在该输入框上时，myFunction()函数将被执行。

function myFunction() {
  alert("The input field has received focus!");
}

以上代码将弹出一个警告框，其中包含文本“该输入字段已获得焦点！”。

更多示例

以下是更多使用onfocus事件的示例：

1. 验证表单输入

可以使用onfocus事件来验证表单输入的值。例如，要确保输入字段包含仅数字，可以使用以下代码：

<input type="text" onfocus="this.value=''">

此代码确保在文本框上单击时先清空输入框。

<input type="text" onfocus="if(this.value==='Name') this.value=''">

此代码将检查输入框中的值，并在输入框上单击时如果其值等于“Name”，则将清空输入框。

2. 自动填充表单

可以使用onfocus事件来自动填充表单输入。例如，如果希望在输入框获得焦点时自动填充名称，请使用以下代码：

<input type="text" onfocus="this.value='John Smith'">

此代码将自动在输入框上填充名称“John Smith”。

结论

因此，onfocus事件是HTML文档和JavaScript中的一种非常有用的事件，允许开发人员在用户从一个元素移到另一个元素时触发事件，并允许在HTML元素上执行各种有用的操作。