input输入效果控制onfocus和onblur事件
2010-07-18 10:43
537 查看
参考建行的代码.
主要思想是:
在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变
.tip_on, .tip_off
代码如下
<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>
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'"/>
主要思想是:
在输入框input 里面利用onfocus 和onblur两个事件.分别将提示信息的class改变
.tip_on, .tip_off
代码如下
<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>
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'"/>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- input输入效果控制onfocus和onblur事件
- js控制input输入后捕获回车事件
- [原]创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur
- 创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur
- input输入后延迟触发事件，
- JS 之 onfocus事件和onblur事件
- input标签只能输入数字JQuery控制
- js控制input输入的内容
- textbox添加onfocus与onblur事件
- 使用input输入子系统实现对tiny6410LED灯的控制
- 与众不同 windows phone (24) - Input（输入）之软键盘类型, XNA 方式启动软键盘, UIElement 的 Touch 相关事件, 触摸涂鸦
- js中onblur和onfocus事件(用于文本框)
- js控制鼠标事件移动及移出效果显示
- javascript 控制input只允许输入的各种指定内容
- js监听鼠标事件控制textarea输入字符串的个数
- input键盘控制输入值
- 用回车键实现MFC对话框中TAB键控制输入焦点在控件中跳转的效果
- unity3d输入与控制——键盘事件
- Android 4.0 事件输入(Event Input)系统
- 老生常谈onBlur事件与onfocus事件(js)