JS的blur|极客笔记

JS的blur

在JavaScript中，blur是一个事件，当一个元素失去焦点时会触发该事件。这个事件通常出现在用户输入内容后，点击页面其他位置或按下Tab键时。在本文中，我们将详细介绍blur事件的用法、特性以及实际应用中的示例。

事件绑定

要绑定blur事件，可以使用addEventListener方法或直接在HTML元素中使用onblur属性。下面是两种方法的示例：

使用addEventListener方法绑定blur事件

const inputElement = document.getElementById('myInput');

inputElement.addEventListener('blur', function() {
  console.log('输入框失去焦点了');
});

使用onblur属性直接在HTML元素中绑定blur事件

<input type="text" id="myInput" onblur="handleBlur()">
<script>
function handleBlur() {
  console.log('输入框失去焦点了');
}
</script>

事件处理函数

在事件处理函数中，我们可以执行一些操作来响应用户输入内容后元素失去焦点的情况。比如对输入内容进行验证、保存用户输入或展示相关信息。

验证用户输入

inputElement.addEventListener('blur', function() {
  const value = inputElement.value;
  if (value === '') {
    alert('输入框不能为空');
  }
});

保存用户输入

inputElement.addEventListener('blur', function() {
  const value = inputElement.value;
  saveToDatabase(value);
});

function saveToDatabase(value) {
  // 将用户输入的内容保存到数据库
}

展示相关信息

const errorMessage = document.getElementById('errorMessage');

inputElement.addEventListener('blur', function() {
  const value = inputElement.value;
  if (value.length < 5) {
    errorMessage.textContent = '输入内容太短';
  } else {
    errorMessage.textContent = '';
  }
});

实际应用示例

表单验证

在表单提交前，可以使用blur事件对用户输入的内容进行验证。下面是一个简单的表单验证示例：

<form>
  <input type="text" id="username" placeholder="用户名">
  <span id="usernameError" style="color: red;"></span>
  <input type="password" id="password" placeholder="密码">
  <span id="passwordError" style="color: red;"></span>
  <button type="submit">提交</button>
</form>

<script>
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const usernameError = document.getElementById('usernameError');
const passwordError = document.getElementById('passwordError');

usernameInput.addEventListener('blur', function() {
  if (usernameInput.value.length < 3) {
    usernameError.textContent = '用户名太短';
  } else {
    usernameError.textContent = '';
  }
});

passwordInput.addEventListener('blur', function() {
  if (passwordInput.value.length < 6) {
    passwordError.textContent = '密码太短';
  } else {
    passwordError.textContent = '';
  }
});

</script>

在上面的示例中，当用户名输入框或密码输入框失去焦点时，会对用户输入的内容进行验证，并在相应的提示框内展示错误信息。