A JavaScript Fancier

伟大的javascript技术研究中...

:: 管理 ::

304 随笔 :: 0 文章 :: 479 评论 :: 0 Trackbacks

经典有人要这个代码，考虑到password中输入的内容会显示为*号，所以要想办法解决*的问题。当初想用setAttribute动态修改type属性达到效果，再ff下测试成功，但没想到setAttribute对type属性的修改在ie中无效。最终采用背景图片的方式解决了这个。即为password设定一个背景图片，图片文字为提示信息
如：

，当鼠标放上时不显示背景图片。
代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
  <title></title>
  <style type="text/css">
  *{
  margin:0px;padding:0px;font-size:12px;
  }
    input{
      width:150px;height:20px;line-height:20px;border:1px solid #ccc;
    }

</style>
</head>

<body>
<script language="javascript">
function chgForm(id){
    if(document.getElementById(id).value=="密码长度必须在3-18位之间")
        document.getElementById(id).value="";
    document.getElementById(id).setAttribute("type","password");

}
function chkForm(id){
    if(document.getElementById(id).value.length==0){
        document.getElementById(id).setAttribute("type","text");
        document.getElementById(id).value="密码长度必须在3-18位之间";
    }
}
function chkFormpic(id){
    if(document.getElementById(id).value.length==0){
        document.getElementById(id).style.background='url(tips.gif) no-repeat';
    }
}
</script>
<br />
姓名：<input type="text" id="username" value="姓名长度最多16个字符" onfocus="this.select()" />
<br /><br />
动态修改input的type属性（仅在ff下有效）：
<br />
密码：<input type="text" id="password" onmouseover="chgForm('password')" value="密码长度必须在3-18位之间" onmouseout="chkForm('password')" />

<br /><br />图片提示(在ff/ie下均有效）：<br />
密码：<input type="password" id="p1" onmouseover="this.style.background=''" style='background:url(tips.gif) no-repeat'  onmouseout="chkFormpic('p1')" />
</body>
</html>

演示效果可以看：http://bbs.blueidea.com/thread-2679362-1-1.html

posted on 2006-09-28 14:00 Yemoo'S JS Blog 阅读(1251) 评论(0) 编辑收藏引用所属分类: javascript个人作品

只有注册用户登录后才能发表评论。

A JavaScript Fancier

公告

常用链接

留言簿(26)

随笔分类

随笔档案

Ajax技术站点

javascript学习站点

JS高人Blog

Ruby&&Ajax框架

Web技术站点

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜