js操作输入框提示信息且响应鼠标事件-前端开发

下面是关于“js操作输入框提示信息且响应鼠标事件”的攻略。

下面是关于“js操作输入框提示信息且响应鼠标事件”的攻略。

步骤一：HTML结构

首先在HTML中定义一个输入框，例如：

<input type="text" id="username" placeholder="请输入用户名"/>

在这个输入框中，我们设置了id和placeholder属性。其中id属性用于后面在JS中获取这个输入框，placeholder属性用于在输入框中显示提示信息。

步骤二：CSS样式

我们可以使用CSS样式来美化输入框的外观，例如：

input[type="text"] {
  width: 200px;
  height: 30px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
}

这里我们设置了输入框的宽高、内外边距、边框、圆角、字号和聚焦时的样式。

步骤三：JS实现

下面我们需要用JS来实现在输入框中显示提示信息，并且响应鼠标事件。代码如下：

// 获取输入框
var username = document.getElementById('username');

// 绑定事件
username.addEventListener('focus', function() {
  if (this.value === '') {
    this.placeholder = '请输入用户名';
  }
});

username.addEventListener('blur', function() {
  if (this.value === '') {
    this.placeholder = '请输入用户名';
  } else {
    // 验证用户名是否正确
  }
});

这里我们用getElementById方法获取输入框，然后用addEventListener方法绑定两个事件：focus和blur。当输入框获得焦点时，判断输入框的值是否为空，如果为空就把placeholder属性设置成提示信息。当输入框失去焦点时，再次判断输入框的值是否为空，如果为空就把placeholder属性设置成提示信息，否则就进行表单验证。

示例一：邮箱格式验证

我们可以用上面的代码作为基础，来实现一个邮箱格式验证的功能。代码如下：

// 获取输入框
var email = document.getElementById('email');

// 绑定事件
email.addEventListener('focus', function() {
  if (this.value === '') {
    this.placeholder = '请输入邮箱地址';
  }
});

email.addEventListener('blur', function() {
  if (this.value === '') {
    this.placeholder = '请输入邮箱地址';
  } else {
    // 验证邮箱格式是否正确
    var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if (!reg.test(this.value)) {
      this.value = '';
      this.placeholder = '邮箱格式不正确';
    }
  }
});

示例二：密码强度验证

我们可以用上面的代码作为基础，来实现一个密码强度验证的功能。代码如下：

// 获取输入框
var password = document.getElementById('password');

// 绑定事件
password.addEventListener('focus', function() {
  if (this.value === '') {
    this.placeholder = '请输入密码';
  }
});

password.addEventListener('blur', function() {
  if (this.value === '') {
    this.placeholder = '请输入密码';
  } else {
    // 验证密码强度
    var strength = 0;
    if (this.value.length >= 6 && this.value.length <= 16) {
      strength++;
    }
    if (/\d/.test(this.value)) {
      strength++;
    }
    if (/[A-Z]/.test(this.value) || /[a-z]/.test(this.value)) {
      strength++;
    }
    if (/\W/.test(this.value)) {
      strength++;
    }

    // 根据密码强度设置提示信息
    if (strength === 0) {
      this.value = '';
      this.placeholder = '密码不能为空';
    } else if (strength === 1) {
      this.value = '';
      this.placeholder = '密码太弱';
    } else if (strength === 2) {
      this.value = '';
      this.placeholder = '密码一般';
    } else if (strength === 3) {
      this.placeholder = '密码强度较高';
    } else {
      this.placeholder = '密码强度很高';
    }
  }
});