JS 失去焦点|极客笔记

JS 失去焦点

JavaScript（简称 JS）是一种轻量级、解释型或即时编译的编程语言。它是一种动态类型、基于原型的语言，具有一系列强大的特性，使它成为 Web 前端开发中不可或缺的一部分。

在 Web 开发中，经常会遇到需要处理输入框（input）失去焦点（blur）事件的情况。失去焦点是指用户在进行输入操作后，移出输入框的行为。在这篇文章中，我们将详细解释 JS 失去焦点的几个方面：

失去焦点事件说明
失去焦点事件的绑定
失去焦点事件的处理
失去焦点事件的应用

失去焦点事件说明

失去焦点事件是指当用户在输入框中输入信息后，将焦点移出输入框时触发的事件。在 Web 开发中，失去焦点事件通常用于校验用户输入的内容、保存用户输入的内容等操作。

失去焦点事件在 JS 中对应的方法是 blur。

失去焦点事件的绑定

要处理失去焦点事件，首先需要将事件与相应的元素绑定。可以使用 addEventListener 方法来为元素添加失去焦点事件的监听器。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>失去焦点事件</title>
</head>
<body>

<input type="text" id="inputBox">

<script>
const inputBox = document.getElementById("inputBox");

inputBox.addEventListener("blur", function() {
  console.log("Input box lost focus");
});
</script>

</body>
</html>

在上面的示例中，创建了一个输入框，并为输入框添加了失去焦点事件的监听器。当用户在输入框中输入内容后将焦点移出输入框时，控制台会输出 “Input box lost focus”。

失去焦点事件的处理

失去焦点事件的处理可以根据实际需求进行，常见的处理方式包括：

校验用户输入的内容
提示用户输入是否合法
保存用户输入的内容

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>失去焦点事件处理</title>
</head>
<body>

<input type="text" id="inputBox">
<p id="message"></p>

<script>
const inputBox = document.getElementById("inputBox");
const message = document.getElementById("message");

inputBox.addEventListener("blur", function() {
  const inputValue = inputBox.value;

  if (inputValue.trim() === "") {
    message.innerText = "请输入内容";
  } else {
    message.innerText = "输入内容合法";
    // 这里可以保存用户输入的内容
  }
});
</script>

</body>
</html>

在上面的示例中，当用户输入框失去焦点时，会校验输入内容是否为空，如果为空则提示用户”请输入内容”，如果不为空则提示”输入内容合法”。