js实现input密码框提示信息的方法(附html5实现方法)

2023年6月10日下午8:28 • JavaScript

请看下面的完整攻略：

前置知识

在讲解实现方法之前，需要了解以下几个基础知识：

jQuery：一个JavaScript库，封装了很多常用的操作，能够简化JavaScript编程。
input：HTML5中的input元素，用于创建交互式控件，包括输入框、密码框、复选框、单选框、按钮等。
placeholder：input元素中的一个属性，用于设置输入框或密码框中的提示性文字。

方法一：使用jQuery实现

下面是使用jQuery实现input密码框提示信息的方法：

引入jQuery库。

在标签中添加以下代码：

```html

```

创建input元素，并设置type为“password”，placeholder为提示信息。

html <input type="password" placeholder="请输入密码">

使用jQuery选择器选中密码框元素，并绑定focus和blur事件。

js $("input[type='password']").focus(function(){ $(this).attr("placeholder",""); }); $("input[type='password']").blur(function(){ $(this).attr("placeholder","请输入密码"); });

在focus事件中将password框的placeholder属性设置为“”，在blur事件中将password框的placeholder属性设置为提示信息。

例如，当用户点击password框时，placeholder属性将被删除，用户在输入密码时不会被干扰。当用户将鼠标从password框移开时，将重新添加placeholder属性，以便再次显示提示文本。

具体代码示例可见下方：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery实现input密码框提示信息</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function(){
            $("input[type='password']").focus(function(){
                $(this).attr("placeholder","");
            });
            $("input[type='password']").blur(function(){
                $(this).attr("placeholder","请输入密码");
            });
        });
    </script>
</head>
<body>
    <input type="password" placeholder="请输入密码">
</body>
</html>

方法二：使用HTML5实现

使用HTML5的placeholder属性也可以实现这个功能，这是一种更原生的实现方式。

直接在input元素中设置placeholder属性为提示信息即可，无需使用JavaScript。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5实现input密码框提示信息</title>
</head>
<body>
    <input type="password" placeholder="请输入密码">
</body>
</html>