读书人

在密码框展示提示文字的小技巧兼容i

发布时间: 2012-08-24 10:00:21 作者: rapoo

在密码框显示提示文字的小技巧,兼容ie和火狐(原创)

<input type="text" value="邮箱/会员账号/手机号" id="username" style="width:150px;height:24px;"/><div id="pwd_warpper" style="width:150px;height:24px;"><input type="text" value="请输入密码" id="_password" onfocus="showpassword();" style="width:150px;height:24px;"/></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="code.js"></script>





javascript代码code.js
function showtext() {    if($("#password").val()=="") {$("#pwd_warpper").html("<input type=\"text\" value=\"请输入密码\" id=\"_password\" onfocus=\"showpassword();\" style=\"width:150px;height:24px;\"/>");    }}function showpassword() {    $("#pwd_warpper").html("<input type=\"password\" value=\"\" id=\"password\" onblur=\"showtext();\" style=\"width:150px;height:24px;\"/>");    /**    这里为什么要用setTimeout,因为ie比较傻,刚创建完对象,你直接设置焦点    在ie下是不会响应的,你必须留出时间给ie缓冲下,所以加上了这个定时器    **/    setTimeout(function(){$("#password").focus();    },20);}$(function(){var usernameDefStr = $("#username").val();$("#username").focus(function(){    if($(this).val()==usernameDefStr)        $(this).val("");});$("#username").blur(function(){    if($(this).val()=="")        $(this).val(usernameDefStr);});});

读书人网 >Web前端

热点推荐