input输入效果控制onfocus和onblur事件（转）

mathsfan

浏览: 578793 次
性别:
来自: 浙江省杭州市

最近访客更多访客>>

wshq

lauyuhim

496225kyne

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Safari JavaScript XHTML HTML .net

以前看到alibaba上的注册右边的提示信息效果很不错,总想拿过来自己用.

参考建行的代码.

主要思想是:

在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变

.tip_on, .tip_off

代码如下

<!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>
<title>中国建设银行个人网上银行</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<link href="/V5/css5/before_login.css" _fcksavedurl=""/V5/css5/before_login.css"" _fcksavedurl=""/V5/css5/before_login.css"" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
.tip_off {
background:#fff url(tip_off.gif) 4px 6px no-repeat;
padding:5px 3px 2px 15px;
color:#777;
}
.tip_on {
border:1px solid #090;
background:#e9fde9 url(tip_on.gif) 4px 6px no-repeat;
padding:4px 3px 1px 14px;
color:#444;
}
</style>

<body bottommargin="0" bgproperties="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0">
<form name="jhform" method="post" action="/app/B2CMainPlatV5?CCB_IBSVersion=V5" target="_parent" onsubmit="return jiamiMima();return go1();">
<div id="Page_content">
<div class="reg_title"></div>
<div class="Area_content">
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="text_user" width="150" height="50" class="text_content login_big"> 用户昵称/证件号码：</td>
<td width="255" height="50" class="text_content"><input name="USERID" type="text" size="20" minLength="1" maxLength="20" title="用户昵称/证件号码"
onfocus="hidekeyboard=true;login_2.className='tip_on'" onblur="login_2.className='tip_off'" value=''/></td>
<td width="280" height="50" class="text_content">
<div id="login_2" class="tip_off">输入您在注册网上银行时使用的证件号码或您设置登陆方式的网上银行用户名(昵称) / 证件号码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">登录密码：</td>
<input type="hidden" name="TXCODE" value="100101">
<input type="hidden" name="CCB_PWD_MAP_GIGEST" value="">
<input type="hidden" name="errURL" value="/app/V5/CN/STY1/login.jsp">
<td height="50" class="text_content"><input name="LOGPASS" type="password" size="20" minLength="6" maxLength="12" onfocus="hidekeyboard=true;login_3.className='tip_on'" title="登录密码" onblur="login_3.className='tip_off'" />
</td>
<td width="280" height="50" class="text_content">
<div id="login_3" class="tip_off">输入您设置的网上银行登录密码</div>
</td>
</tr>
<tr>
<td width="120" height="50" class="text_content login_big">附加码：</td>
<td height="50" class="text_content">
<input name="PT_CONFIRM_PWD" type="text" onfocus="hidekeyboard=true;login_4.className='tip_on'" onblur="login_4.className='tip_off'" minLength="1" maxLength="5" title="附加码" /></td>
<td width="280" height="50" class="text_content">
<div id="login_4" class="tip_off">输入右侧图片中的字符 </div></td>
</td></tr>
</table>
</form>
</body>
</html>
效果图：

PS：个人感觉还不错，后面的文字的背景色会随着前面的焦点位置的改变而改变，保存下来看看。
文章转自：http://blog.csdn.net/kemy88/archive/2007/03/01/1517698.aspx

分享到：

使用SCH插件时遇到的错误（原） | 杭州的雨

2007-06-25 21:06
浏览 7756
评论(2)
查看更多

2 楼 jinweijieloveszhuye 2007-06-28

oops... curObjId.id + "prompt" 应写成 curObjId.id + "_prompt"

1 楼 jinweijieloveszhuye 2007-06-28

可以考虑把输入框自己的颜色变一下，就像safari form的效果一样

上面这段代码还是有改进的地方的，我觉得这样写会比较好一点：

html:
<input type="text" id="field1" onclick="doFocus(this);"/> <span id="filed1_prompt">blar...blar...</span>

javascript:

<script type="text/javascript">

var curObjId="";

function doFocus(obj){
//do some focus
document.getElementById( obj.id + "prompt" ).className="someFocusClassName";

//restore the previous obj's class name
document.getElementById( curObjId.id + "prompt" ).className="someNormalClassName";

//update the current object id
curObjId = obj.id;

//and, here, you can do some other effects like highlight the textbox it self
}

</script>

这样做可以把html代码和js分开，容易维护些，也没有很多重复代码，不知楼主觉得如何？欢迎探讨

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论