input輸入效果控制onfocus和onblur事件
以前看到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;
}
<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>
2.163郵箱登陸的簡單效果
onMouseOver="this.style.borderColor='#9ecc00'" onMouseOut="this.style.borderColor='#84a1bd'"
<style type="text/css">
.inp{border:1px solid #84a1bd; width:157px; padding:2px 2px 2px 2px ; background-position: -70px -424px}
</style>
<input type="text" name="username" class="inp" onMouseOver="this.style.borderColor='#9ecc00'"
onMouseOut="this.style.borderColor='#84a1bd'"/>