经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 请教高手文本框提示问题

查看: 3009|回复: 8

请教高手文本框提示问题 [复制链接]

yanwuxu　楼主

中级会员

帖子: 90
体力: 297
威望: 0

发表于 2006-9-25 11:16:43 |显示全部楼层

做了个注册页面,需要输入名字,密码,邮箱,验证码之类的信息,现在想在所需要填写信息的对应文本框内默认就显示"姓名长度最多16个字符""请填写常用邮箱"之类的提示语,当鼠标移到对应的文本框室提示语不显示,等待用户输入注册信息,请问改如何实现?谢谢!

西部数码顶级域名注册商39元抢注！

使用道具举报

WT1985　

冷夜

高级会员

帖子: 369
体力: 558
威望: 0

发表于 2006-9-25 11:35:54 |显示全部楼层

<body>
姓名：<input type="text" size=30 id="username" onfocus="foucusd();" value="姓名长度最多16个

字符"/>
<script language="javascript">
function foucusd(){
document.getElementById("username").value="";
}
</script>
</body>

请记住航母最主要功能不是用来打的，是用来威慑的！

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

yanwuxu　楼主

中级会员

帖子: 90
体力: 297
威望: 0

发表于 2006-9-25 12:43:16 |显示全部楼层

谢谢楼上(兄弟or姐妹?)^_^!

使用道具举报

yanwuxu　楼主

中级会员

帖子: 90
体力: 297
威望: 0

发表于 2006-9-28 07:53:40 |显示全部楼层

菜鸟再问高手:按照2楼的方法当只有一个框框需要提示的时候可以的,可是注册的时候同时还有密码呀,确认密码,邮箱地址等好几项,对应的加好后显示提示语是正常的,可是鼠标点击时只有一个可以变为空了,而且对应密码的文本框提示语直接编程*号(就是自己输入密码时防止别人看到的样子),请问如何解决?再谢,^_^!

使用道具举报

yanwuxu　楼主

中级会员

帖子: 90
体力: 297
威望: 0

发表于 2006-9-28 10:40:54 |显示全部楼层

找到了,就是密码框提示语显示为*号的不知怎么解决

使用道具举报

84yemoo　

神秘网人

金牌会员 

帖子: 556
体力: 3369
威望: 18

发表于 2006-9-28 11:12:27 |显示全部楼层

<!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:100px;height:20px;border:1px solid #ccc;
    }

</style>
</head>

<body>
<script language="javascript">
function tips(id,str){
var l=document.getElementById(id).offsetLeft+120;
var t=document.getElementById(id).offsetTop;
document.getElementById("tips").innerHTML="提示："+str;
document.getElementById("tips").style.left=l+"px";
document.getElementById("tips").style.top=t+"px";
document.getElementById("tips").style.display="";
}
function outtips(){
    document.getElementById("tips").style.display='none';
}
</script>
<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>
<br />
姓名：<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />
<br />
密码：<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />
</body>
</html>

提示：您可以先修改部分代码再运行

这样如何？？

Welcome To My Blog

使用道具举报

yanwuxu　楼主

中级会员

帖子: 90
体力: 297
威望: 0

发表于 2006-9-28 11:47:59 |显示全部楼层

谢谢楼上回复,这样也很好,我试试看!
我还想如果密码框的提示始终为*号的话(可能改不了了)就看看能否把那个提示语换成小图片(图片上写提示语),当鼠标移到文本框上是图片不显示,等待用户输入的,不知道这样是否可行?请指教!

使用道具举报

84yemoo　

神秘网人

金牌会员 

帖子: 556
体力: 3369
威望: 18

发表于 2006-9-28 13:31:52 |显示全部楼层

在ie中无法使用setAttribute修改input标签的type属性，再ff中可以，所以在ie下无法改变*的显示效果，图片的方式可以解决此问题。代码如下。

<!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(http://bbs.blueidea.com/attachment.php?aid=11433) 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(http://bbs.blueidea.com/attachment.php?aid=11433) no-repeat'  onmouseout="chkFormpic('p1')" />
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 84yemoo 于 2006-9-28 13:33 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

Welcome To My Blog

使用道具举报