jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

本篇攻略将介绍如何使用jQuery实现输入框（input）获取焦点时提示消失，失去焦点时提示显示的功能。

创建HTML结构和CSS样式

首先，我们需要创建输入框及提示信息的HTML结构以及相应的CSS样式。

以下是一个示例HTML结构：

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名">
  <span class="tip">用户名需为英文、数字或下划线，长度为3-20个字符</span>
</div>

该结构包含了一个表单组（form-group），包含标签（label）、输入框（input）和提示信息（tip）。

接下来定义相应的CSS样式：

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #DDD;
}

.tip {
  display: none;
  font-size: 14px;
  color: red;
}

通过CSS样式，我们可以将提示信息隐藏起来，并且设置好输入框的基本样式。

使用jQuery实现提示消失和显示的功能

接下来，我们使用jQuery实现输入框获取焦点时提示消失，失去焦点时提示显示的功能。

示例一

一个简单的示例，当我们点击输入框时，提示信息消失，当输入框失去焦点时，提示信息重新显示。

$(document).ready(function() {
  var $input = $('input');
  var $tip = $('.tip');

  // 输入框获取焦点时
  $input.on('focus', function() {
    $tip.fadeOut();
  });

  // 输入框失去焦点时
  $input.on('blur', function() {
    var val = $(this).val();
    if (!val) {
      $tip.fadeIn();
    }
  });
});

首先选取输入框和提示信息的jQuery对象，然后通过on方法绑定focus和blur事件。

当输入框获取焦点时，我们使用fadeOut方法将提示信息淡出，当输入框失去焦点时，通过val方法获取输入框的值，如果输入框的值为空，则使用fadeIn方法将提示信息淡入。

示例二

一个更为完善的示例，当用户输入时直接通过正则校验信息格式是否正确，并提示是否正确。

$(document).ready(function() {
  var $input = $('input');
  var $tip = $('.tip');

  var reg = /^[a-zA-Z0-9_]{3,20}$/; // 定义正则表达式

  // 输入框获取焦点时
  $input.on('focus', function() {
    $tip.fadeOut();
  });

  // 输入框失去焦点时
  $input.on('blur', function() {
    var val = $(this).val();
    if (!val) {
      $tip.text('请输入用户名').fadeIn();
    } else if (!reg.test(val)) {
      $tip.text('用户名格式不正确，请重新输入').fadeIn();
    } else {
      $tip.text('用户名格式正确').fadeOut();
    }
  });
});

除了上一个示例的基础上，我们通过定义一个正则表达式，根据输入框的值直接判断格式是否正确，并且直接提示是否正确。

如果输入框没有值，提示信息显示为“请输入用户名”并淡入，如果输入框的值不符合正则表达式的规则，则提示信息显示为“用户名格式不正确，请重新输入”并淡入，如果输入框的值符合正则表达式的规则，则提示信息显示为“用户名格式正确”并淡出。

总结

通过jQuery，我们可以很轻松地实现输入框获取焦点时提示消失，失去焦点时提示显示的功能。无论是简单的示例还是完善的示例，通过上述方式都可以实现。同时，我们也可以根据实际需求不断完善和改进这个功能。