密码框提示文字

最新推荐文章于 2021-09-17 17:43:55 发布

lyj73231

最新推荐文章于 2021-09-17 17:43:55 发布

阅读量976

点赞数

分类专栏：原创文章标签：密码框提示文字兼容IE6 CSS 密码框显示文字

本文链接：https://blog.csdn.net/lyj73231/article/details/40378357

版权

原创专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在密码框提示文字很早就实现了，网上虽然也有，但不是我想要的，现在我参考网易邮箱写的一个程序，希望对初学者有所帮助。

首先我们来看下以下一段代码，虽然功能能实现，但不兼容IE6。代码如下：

<input type="text" value="请输入密码!" οnfοcus="if(this.value==defaultValue) {this.value='';this.type='password'}"οnblur="if(!value) {value=defaultValue; this.type='text';}" style="color: #CCC;" />

在一些旧版本的浏览器中，input type 属性是只读的，不能修改，所以这种方法不够完美，下面这个例子完美支持IE6以上及其他版本的浏览器。

直接看例子代码，记得引用jquery。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .loginFormIpt{position: relative;width: 250px;height: 22px;line-height: 42px;padding-right: 5px;clear: both;background-position: 0 -352px;z-index: 2;}
        label{vertical-align: middle;color: #C9C9C9;}
        .formIpt{width: 205px;height: 24px;border: 1px solid #C9C9C9;ime-mode: disabled;height: 21px;color: #333;font-size: 14px;font-weight: 700;font-family: verdana;line-height: 21px;background: transparent !important;}
        .showPlaceholder .placeholder{visibility: visible;cursor: text;}
        .placeholder{color: #C9C9C9;font-size: 14px;position: absolute;left: 5px;top: 6px;line-height: 14px;visibility: hidden;background: none;}
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#pwdInput").keyup(function () {
                if ($(this).val() != "") {
                    $("#pwdPlaceholder").hide(0);
                } else {
                    $("#pwdPlaceholder").show(0);
                }
            });
            $("#pwdInput").blur(function () {
                if ($(this).val() == "") {
                    $("#pwdPlaceholder").show(0);
                }
            });
        })
    </script>
</head>
<body>
    <div>
        <div id="pwdInputLine" class="loginFormIpt showPlaceholder">
            <input class="formIpt" tabindex="2" title="请输入密码" id="pwdInput" name="password" type="password" />
            <label for="pwdInput" class="placeholder" id="pwdPlaceholder">密码</label>
        </div>
    </div>
</body>
</html>