密码框提示文字

来源：互联网发布：陈冠希道歉知乎编辑：程序博客网时间：2024/06/05 11:20

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

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

<input type="text" value="请输入密码!" onfocus="if(this.value==defaultValue) {this.value='';this.type='password'}"onblur="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>

0 0