打印

请教高手文本框提示问题

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

1^# 大中小发表于 2006-9-25 11:16

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

TOP

西部数码分布式集群主机傲视群雄 | Adobe设计师狂欢节在线讲座免注册进入

WT1985

冷夜

高级会员

帖子: 368
体力: 550
威望: 0
离线: 171 天

2^# 大中小发表于 2006-9-25 11:35

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

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

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

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

3^# 大中小发表于 2006-9-25 12:43

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

TOP

国际动画人才海外高薪就业

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

4^# 大中小发表于 2006-9-28 07:53

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

TOP

明天教室职业插画师培训计划

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

5^# 大中小发表于 2006-9-28 10:40

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

TOP

84yemoo

神秘网人

银牌会员

认证
帖子: 555
体力: 1697
威望: 18
当前: 河南郑州
离线: 137 天

专长 前端制作,JS,SEO

6^# 大中小发表于 2006-9-28 11:12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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

TOP

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

7^# 大中小发表于 2006-9-28 11:47

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

TOP

84yemoo

神秘网人

银牌会员

认证
帖子: 555
体力: 1697
威望: 18
当前: 河南郑州
离线: 137 天

专长 前端制作,JS,SEO

8^# 大中小发表于 2006-9-28 13:31

在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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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

TOP

yanwuxu [楼主]

中级会员

帖子: 90
体力: 292
威望: 0
离线: 675 天

9^# 大中小发表于 2006-9-28 16:16

超感谢84yemoo,马上去试,^_^!

TOP