首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-08-24 
在密码框显示提示文字的小技巧,兼容ie和火狐(原创)input typetext value邮箱/会员账号/手机号 id

在密码框显示提示文字的小技巧,兼容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);});});

热点排行