用jquery怎么实现点击密码输入框，上面的提示文字“请输入密码”消失，失去焦点时候提示文字又存在

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery怎么实现点击密码输入框，上面的提示文字“请输入密码”消失，失去焦点时候提示文字又存在相关的知识，希望对你有一定的参考价值。

没有获取焦点的时候：

获取了焦点的时候：

如果是用户名，我直接通过jquery控制input框的value值，但是密码框的type是password，是黑点，用这个方法就不行了，新手求助，谢谢。

方法1.对于支持placeholder属性的浏览器。可以暂且认为除了老版本的IE系列浏览器都支持这个属性。可以直接在input标签上附加属性，如下：

<input type="password" name="pwd" placeholder="请输入密码" />

方法2.对于不支持placeholder属性的浏览器，使用一个相对定位的元素，使其偏移，浮在输入框上方。当用户点击这个偏移元素，或输入框获得焦点时，隐藏这个偏移元素，来模拟placeholder的效果。

 参考技术A     <input type="text" id="pwd" />
    <input type="hidden" id="pwdvalue" />

    <script type="text/javascript">
        var pwd = document.getElementById("pwd");
        var pwdvalue = document.getElementById("pwdvalue");

        pwd.onkeypress = function() 
            var code = arguments[0].keyCode
            pwdvalue.value += String.fromCharCode(code);
            arguments[0].returnValue = false;
            pwd.value += "x";
        
    </script>

 参考技术B <input type="text" id="pwds" />

$("input#pwds").on('blur', function()
    var obj = $(this);
    obj.attr('type', 'text').val('密码');
).on('focus', function()
    var obj = $(this);
    obj.attr('type', 'password').val('');
);

本回答被提问者采纳 参考技术C 只要在密码框的input 获得焦点时触发，当获得焦点时，控制value的同时，改变type属性，把type属性置为password 应该就行了， 参考技术D 仅供参考

<html>
<head>
<script src="./jquery-1.9.1/jquery-1.9.1.min.js"></script>
<script>
$(function()
var pwd = $("#pwd");
pwd.attr("type","text");
pwd.bind("focus",function()
pwd.attr("type","password");
pwd.attr("value","");
);

pwd.bind("blur",function()
var pwdtext = pwd.val();
if(pwdtext.length === 0)
pwd.attr("type","text");
pwd.attr("value","密码");

);
);
</script>
</head>
<body>
<form>
<input id="pwd" type="password" value="密码">登录
</form>
</body>
</html>

jquery实用技巧之输入框提示语句

我们在编写网页的时候不可避免的会遇到输入框，那么怎么设计输入框才能更加优雅呢？不同的人会有不同的答案，下面分享一个比较不错的设计。

效果图

技术分享图片

细节

这个效果主要是通过JQuery来实现，我的思路如下：

输入框获取鼠标焦点之前，显示原标签的value属性值；获取了鼠标焦点之后，如果当前value有值，那就清空，否则恢复；密码框特殊照顾，待会讲。 

实现的代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
$("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
$("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });

完整的小例子

完整的代码如下，尤其注意<input type="text" id="password">的实现！

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本输入框中内容的提示效果</title>
  <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
  $("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
  $("#password").focus(function(){
    var password_text = $(this).val();
    if(password_text=="请输入密码"){
      $(this).attr("type","password");
      $(this).val("");
    }
  });
  $("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });
  $("#password").blur(function(){
    var password_value = $(this).val();
    if(password_value==""){
      $(this).attr("type","text");
      $(this).val("请输入密码")
    }
  });
});
</script>
<div align="center">
  <input type="text" id ="address" value="请输入邮箱地址"><br><br>
  <input type="text" id ="password" value="请输入密码"><br><br>
  <input type="button" name="登录" value="登陆">
</div>
</body>
</html>

$(function(){});其就是$(document).ready(function(){});的缩写。这个倒不是什么重点。

$(this).attr(“type”,”password”);将当前对象（也就是获取鼠标焦点的输入框）的属性值进行动态的改变。达到输入数据的时候以密码框的形式出现。

以上是关于用jquery怎么实现点击密码输入框，上面的提示文字“请输入密码”消失，失去焦点时候提示文字又存在的主要内容，如果未能解决你的问题，请参考以下文章

Jquery怎样实现文本输入框鼠标定位时弹出提示

Jquery实现检测用户输入用户名和密码不能为空

用jquery怎么验证名字在输入完之后马上提示有没有重复的代码

用jquery解决IE输入框不能输入的问题

jquery实用技巧之输入框提示语句

php怎样实现点击删除时弹出输入框输入密码确认后再删除？