【经验】密码输入框文字提示实现

最近在写一个登陆页面,遇到了下面样式

账号和验证码都好说,关键是密码,一般我们写密码

<input  type="text" value="密码" placeholder="密码" />

对于高版本的ie和谷歌这样写完全是可以的,但是对于ie7,ie8就会显示成

因为ie7,ie8不兼容placeholder属性,所以,“密码”根本显示不出来,于是在网上找了很多方法都没有很好的解决,于是请教了经验丰富的同事,在她的点拨下做出来了,在此分享给大家。

方法:写两个input,一个类型是text,一个类型是password,text类型的input用作显示“密码”,当然password类型的就是真正的密码框了,首先将password类型的input隐藏,当鼠标获取光标的时候,显示password类型的input,输入密码,失去光标的时候,text类型的input显示,password类型的input隐藏。

代码如下:

<li class="password_box">

         <input class="password_holder" type="text" value="密码" placeholder="密码" />

         <input class="hide password" type="password" value=""  placeholder="密码" />            

</li>

jq代码:

function passWordFocus () {

         var value = $(this).val();

         if (value == '密码') {

                 $(this).val('');

          }

}

$('.password_holder').focus(function() {

            $(this).toggleClass('hide');

            $('.password').toggleClass('hide').focus();

 });

$('.password').focus(function() {

 }).blur(function() {

            if ($(this).val() == '') {

                  $(this).toggleClass('hide');

                  $('.password_holder').toggleClass('hide');     

             }else{

                           

             };

 });

效果如下:

以上只供参考,不一定是最好的方法,望大家有更好的方法,多多分享。

本文转载自:迹忆客(https://www.jiyik.com)

以上是 【经验】密码输入框文字提示实现 的全部内容, 来源链接: utcz.com/z/290101.html

回到顶部