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

最新推荐文章于 2024-05-31 13:53:36 发布
最新推荐文章于 2024-05-31 13:53:36 发布
阅读量1.8w 收藏 2
点赞数
分类专栏： html 文章标签： input class login stylesheet border div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kemy88/article/details/1517698
版权

以前看到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" οnsubmit="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="用户昵称/证件号码"
οnfοcus="hidekeyboard=true;login_2.className='tip_on'" οnblur="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" οnfοcus="hidekeyboard=true;login_3.className='tip_on'" title="登录密码" οnblur="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" οnfοcus="hidekeyboard=true;login_4.className='tip_on'" οnblur="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'"/>

kemy88
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js代码触发事件　函数列表
10-19 2707
onabort 当用户中断下载图像时触发。 onactivate 当对象设置为活动元素时触发。 onafterprint 对象所关联的文档打印或打印预览后立即在对象上触发。 onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。 onbeforeactivate 对象要被设置为当前元素前立即触发。 onbeforecopy 当选中区复制到系统剪贴板之前在源对象触发。
JS：onfocus和onblur 事件应用举例
12-30
JS：onfocus和onblur 事件应用举例
input onfocus,onblur
b67834063218449的博客
07-05 197
<input type="text" style="color: rgb(153, 153, 153);" value="用户名" class="clear-input" onfocus="cls(this,'用户名');" onblur="res(this,'用户名');" name="userId" id="userId" tabindex="1"> 　　 ...
div绑定onBlur事件无效的解决方法
最新发布
sunzhen15896的博客
05-31 83
该场景适用于 点击页面空白区域关闭div的情况。给div绑定onBlur事件，默认不触发。
input onfocus
power8988的博客
07-05 1138
有个小伙伴问，如何修改input输入时的背景颜色。
html input onfocus
weixin_30456039的博客
03-11 647
<input type="text" value="请输入内容" onfocus="javascript:if(this.value=='请输入内容')this.value='';"> html中input文本框，初始里边有文字提示，当点击时，文字消失,onfocus事件检查当前值,如果是默认值,就将value属性值置空this.value=''; 转载于:https://...
onBlur事件与onfocus事件（js）
weixin_30731287的博客
10-10 117
onFocus事件就是当光标落在文本框中时发生的事件。 onBlur事件是光标失去焦点时发生的事件。 可以编如下例子 1.html <HTML> <HEAD> <TITLE>使用onBlur事件处理程序</TITLE> </HEAD> <BODY BGCOLOR="lavender"> <FORM name=...
Js中的onblur和onfocus事件应用介绍
10-26
在网页开发中，理解并有效地利用`onfocus`和`onblur`事件是提高用户交互性和表单验证的关键技能。它们不仅可以用于文本输入框，还可以应用于其他可获取焦点的元素，如下拉列表、复选框、单选按钮等。通过结合其他...
详解HTML onfocus获得焦点和onblur失去焦点事件
09-22
`onfocus`事件是在一个元素（通常是可聚焦的元素如`<input>`、`<select>`或`<textarea>`）获取到用户输入焦点时触发的。当用户通过键盘、鼠标或其他交互方式切换到某个元素时，`onfocus`事件就会被激活。这可以用来...
老生常谈onBlur事件与onfocus事件(js)
01-21
onBlur事件是光标失去焦点时发生的事件。 可以编如下例子 1.html <HTML> <HEAD> <TITLE>使用onBlur事件处理程序</TITLE> </HEAD> <BODY BGCOLOR=lavender> <FORM name=F1&...
input 自动聚焦autofocus 、onfocus
Dendrobium_qian的博客
12-19 1156
input 自动聚焦autofocus 、onfocus
将input框中输入内容显示在相应的div中【三种方法可选】
10-19
本篇文章主要介绍了在input框中输入内容，会相应的显示在下面的div中的不同做法：js方法；jQuery方法；AngularJs方法，具有很好的参考价值。下面跟着小编一起来看下吧
HTML设置input搜索框onfocus样式
qq_23994725的博客
05-25 5348
input搜索框onfocus设置圆角边框样式 html： css： #middle1-search{ height: 32px; width: 596px; position: absolute; right:202px; border-radius: 30px; font-size: 14px; color: rgb(153,153,153); backgr
input失去焦点验证格式_在文本框的onblur事件里写验证信息
weixin_29865183的博客
02-16 1277
html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。一。 onfocus(获得焦点事件)当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。以下的文本框，当鼠标指针移过去时，里...
Input 控件的Onchange 与onBlur 事件区别？
lmp5023的博客
03-12 2651
onchange 是指控件的值发生改变且失去焦点时触发的事件 onblur 是不管值有无改变，失去焦点就触发事件
input框激活时展示div，失去焦点时隐藏
菲律宾铁猴子的博客
05-17 1010
Vue输入框的on-focus与on-blur事件 on-focus：输入框聚焦时触发 on-blur:输入框失去焦点时触发 v-show:切换元素的显示状态，true为显示，false为隐藏 根据文章需求，我们应该在input框中绑定上述的on-focus和on-blur，设置需要被控制的div的v-show，控制显示与隐藏，具体代码如下： input框 <Input @on-focus="showDictory" @on-blur="hideDictory" /> 方法 showDicto
监听软键盘的弹出与收起（近乎完美）
热门推荐
当你的才华满足不了你的野心的时候，那么你应该静下心来学习.
04-24 1万+
监听软键盘的弹出与收起的实现方法 由于这周末单休，然后，然后，然后 我一个不小心几乎是睡了一天，深感恐怖，于是我觉得我得做点什么，就想到了前几天两个群友问的关于软键盘的问题，正好我之前在工作中处理过，所以便写个博客记录分享一下 在这里，我写两个实现的方法。 1.是利用OnLayoutChangeListener的监听，在这里我简单的说下过程，因为应群友大大的建议，写的注释还是挺多的，也比较简
oninput、onblur和onchange的区别
qq_36354324的博客
09-02 3337
oninput： 用户在向input输入框里输入数据的时候，会触发oninput事件 <input type="text" placeholder="input事件" class="inp"> btn.onclick = function() { console.log('123') } 一开始是这样的 注意：当我在输入框里面输入的时候，控制台会打印出 123 输入几次，就会触发几次事件，就会打印几次 123 onchange： ...
input输入框的一些常用事件
Tyche_ya的博客
10-12 5809
写在input框里：<input type=“text” οnfοcus=“A();也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName(‘input’).
onfocus 失去焦点事件
05-24
<input type="text" onfocus="alert('输入框获得焦点了！')" onblur="alert('输入框失去焦点了！')"> ``` 在上面的例子中，当这个文本框获得焦点时，会弹出一个警示框，显示“输入框获得焦点了！”；当文本框失去...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值