<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);
});
});