打印

[求助] taobao注册表单的做法

yiran0314 [楼主]

初级会员

帖子: 32
体力: 78
威望: 0
当前: 上海浦东
离线: 3 天

1^# 大中小发表于 2008-1-9 10:28

taobao的注册页面: http://member1.taobao.com/member/register.jhtml?f=top
请问用鼠标点击输入框的时候右边的注释会变一个样式,这种做法具体是怎么实现的啊?

好好的好好

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

ahwing

ahwing

高级会员

帖子: 342
体力: 650
威望: 0
离线: 2 天

专长 前端制作,JS

2^# 大中小发表于 2008-1-9 11:46

试着做了一个，比较菜鸟，但是功能还好是对的。

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

点滴生活

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

yiran0314 [楼主]

初级会员

帖子: 32
体力: 78
威望: 0
当前: 上海浦东
离线: 3 天

3^# 大中小发表于 2008-1-9 12:49

感谢楼上的

好好的好好

TOP

请大家尊重和保护奥运知识产权。

alite

初级会员

帖子: 89
体力: 184
威望: 1
当前: 重庆北碚
离线: 5 天

4^# 大中小发表于 2008-1-9 14:07

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.note{
	width:200px;
	height:20px;
	margin:0;
	padding:0;
	text-align:center;
	line-height:20px;
	}
.text{
	float:left;
	margin:0 10px 0 0;
	}
.normal{
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;}
.special{
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	border:1px solid #0099FF;
	background:#B6E7FC;
	height:18px;}
</style>
</head>
<body>
<input type="text" class="text" />
<div class="normal note">测试一下</div><br />
<input type="text" class="text" />
<div class="normal note">测试一下</div><br />
<input type="text" class="text"/>
<div class="normal note">测试一下</div>
</body>
<script type="text/javascript">
var oInputs = document.getElementsByTagName("input");
var oDivs = document.getElementsByTagName("div");
for( var i = 0;i<oInputs.length;i++){
	oInputs[i].id = i;
	oInputs[i].onfocus = function(){
		oDivs[this.id].className = "special note";		
	}
	oInputs[i].onblur = function(){
		oDivs[this.id].className = "normal note";	
	}
}
</script>
</html>

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

和2楼差不多,只是多弄了几个，个人认为可扩展性稍微要好点,呵呵~~~
PS:我也是菜鸟,权当练习~~~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

yiran0314 [楼主]

初级会员

帖子: 32
体力: 78
威望: 0
当前: 上海浦东
离线: 3 天

5^# 大中小发表于 2008-1-9 14:18

不错学习了

好好的好好

TOP

aiminami

中级会员

帖子: 67
体力: 410
威望: 0
当前: 北京海淀区
离线: 2 天

专长 网页设计,UI,前端制作

6^# 大中小发表于 2008-1-9 15:24

4楼的代码收了
不过……貌似JS位置不能变啊……必须写在</BODY>后边吗？

楼下的试试把JS放到<BODY>后边

[ 本帖最后由 aiminami 于 2008-1-9 15:46 编辑 ]

没策划，没创意，死！

TOP

yiran0314 [楼主]

初级会员

帖子: 32
体力: 78
威望: 0
当前: 上海浦东
离线: 3 天

7^# 大中小发表于 2008-1-9 15:38

不一定吧 JS代码随意变

好好的好好

TOP

bluekein

初级会员

帖子: 76
体力: 95
威望: 0
当前: 广东深圳
离线: 12 天

8^# 大中小发表于 2008-1-9 16:38

回复 #1 yiran0314 的帖子

look
http://bbs.51js.com/viewthread.php?tid=74812&page=1#pid534757

or

http://www.bluekevin.com/checkform2.html

TOP

yiran0314 [楼主]

初级会员

帖子: 32
体力: 78
威望: 0
当前: 上海浦东
离线: 3 天

9^# 大中小发表于 2008-1-9 17:18

回复 #8 bluekein 的帖子

最后这个帅

谢谢大家了这种做法我已经解决了

好好的好好

TOP

asdfgasdfg1

黑色瞳孔

银牌会员

帖子: 611
体力: 1088
威望: 0
当前: 大洋州澳大利亚
离线: 62 天

10^# 大中小发表于 2008-1-9 17:26

效果还不错!!!!!

TOP

alite

初级会员

帖子: 89
体力: 184
威望: 1
当前: 重庆北碚
离线: 5 天

11^# 大中小发表于 2008-1-16 15:12

...

引用:

4楼的代码收了
不过……貌似JS位置不能变啊……必须写在</BODY>后边吗？

楼下的试试把JS放到<BODY>后边

我个人解释的原因有2:
1、在用到getElementById，浏览器必须要先遇到这个ID，所以，如果在浏览器未阅读到这个ID而使用getElementById可能会失效。
2、FIREBUG里好象说了这么一点，script代码写到底部...好象是

[ 本帖最后由 alite 于 2008-1-16 15:14 编辑 ]

TOP

yybf

初级会员

帖子: 43
体力: 96
威望: 0
离线: 17 天

12^# 大中小发表于 2008-7-1 17:21

都收了。呵呵！

ML5X.CN

TOP

挑战者liu

高级会员

帖子: 716
体力: 762
威望: 0
当前: 江苏盐城
离线: 1 天

专长 SEO

13^# 大中小发表于 2008-7-1 22:00

http://www.bluekevin.com/checkform2.html

这个很好

我

TOP