jQuery onblur|极客教程

jQuery onblur

1. 概述

在网页开发中，经常需要处理输入框失去焦点事件（onblur）。失去焦点事件可以用于验证用户的输入、修改输入框样式或执行其他操作。jQuery提供了方便的方法来处理输入框的失去焦点事件，即onblur。

本文将详细介绍jQuery中onblur的使用方法，并给出一些示例代码来帮助读者更好地理解。

2. onblur语法

onblur 是一个事件属性，用于指定元素失去焦点时要执行的函数。

语法如下：

$(selector).on("blur", function)

selector是要绑定失去焦点事件的元素选择器。
function是失去焦点时要执行的函数。

3. 使用示例

3.1 基本示例

首先，我们来看一个简单的示例代码。假设我们有一个输入框，当输入框失去焦点时，我们想要在控制台中输出输入框的值。

HTML代码如下：

<input type="text" id="myInput" placeholder="请输入内容">

JavaScript代码如下：

$("#myInput").on("blur", function(){
  console.log($(this).val());
});

代码解释：

通过$("#myInput")选中id为myInput的输入框元素。
使用.on("blur", function(){})来绑定失去焦点事件，其中function(){}是失去焦点时要执行的函数。
在函数中使用console.log($(this).val())输出输入框的值。

运行以上代码，在输入框中输入内容然后失去焦点，就可以在浏览器的控制台中看到输入框的值。

示例输出：

Hello World

3.2 实时验证示例

在表单中，经常需要对用户的输入进行实时验证。我们可以利用onblur事件来实现这个功能。下面是一个示例，当用户输入的内容为空或不满足特定条件时，输入框会变红并显示错误提示。

HTML代码如下：

<input type="text" id="username" placeholder="请输入用户名">
<span id="error" style="color: red"></span>

JavaScript代码如下：

$("#username").on("blur", function(){
  var username = $(this).val();
  if(username === ""){
    $(this).css("border", "1px solid red");
    $("#error").text("用户名不能为空");
  }else if(username.length < 6){
    $(this).css("border", "1px solid red");
    $("#error").text("用户名长度不能少于6个字符");
  }else{
    $(this).css("border", "1px solid green");
    $("#error").text("");
  }
});

代码解释：

输入框失去焦点时，获取输入框的值并保存在username变量中。
使用条件语句进行输入验证：
- 如果用户名为空，给输入框添加红色边框，并在错误提示元素中显示错误信息。
- 如果用户名长度少于6个字符，给输入框添加红色边框，并在错误提示元素中显示错误信息。
- 如果输入合法，给输入框添加绿色边框，并清空错误提示元素的内容。

运行以上代码，在输入框中输入不合法的用户名（为空或少于6个字符），输入框会变红并显示相应的错误提示。

3.3 动态添加元素示例

使用onblur事件可以实现动态添加元素的功能。下面是一个示例，在用户输入内容后，点击一个按钮，会将输入的内容添加到页面上。

HTML代码如下：

<input type="text" id="inputText" placeholder="请输入内容">
<button id="addButton">添加元素</button>
<div id="content"></div>

JavaScript代码如下：

$("#addButton").on("click", function(){
  var inputVal = $("#inputText").val();
  if(inputVal !== ""){
    var newElement = $("<p>").text(inputVal);
    $("#content").append(newElement);
  }
});

代码解释：