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中的onblur和onfocus事件应用介绍
10-26
在网页开发中，理解并有效地利用`onfocus`和`onblur`事件是提高用户交互性和表单验证的关键技能。它们不仅可以用于文本输入框，还可以应用于其他可获取焦点的元素，如下拉列表、复选框、单选按钮等。通过结合其他...
input onfocus onblur
u011927449的博客
06-09 284
<input type="text" style="color:#999" value="账户" onfocus='if(this.value=="账户"){this.value="";this.style.color="";}' onblur='if(this.value==""){this.value="账户"; this.style.color="#999";}' />
[TimLinux] JavaScript input框的onfocus/onblur/oninput/onchange事件介绍
weixin_30614109的博客
06-29 283
1. onfocus事件 input框获取到焦点时，触发了该事件，比如获取到焦点时，修改input框的背景色。这个功能其实可以使用css的伪类:focus来定义。 2. onblur事件 这个与onfocus事件想法，当input框失去焦点时，触发该事件，比如将输入的文本，统一修改为小写 3. onchange事件 这个事件的发生需要具有2个条件： 失去焦点 内容发生了变化 ...
div绑定onBlur事件无效的解决方法
最新发布
sunzhen15896的博客
05-31 83
该场景适用于 点击页面空白区域关闭div的情况。给div绑定onBlur事件，默认不触发。
javascript的onfocus和onblur事件实现输入框的提示信息显隐
weixin_44800608的博客
07-30 434
原来一直好奇网页上面有一些输入框： 在鼠标不点击里面的时候，里面有相应的提示信息，但是当鼠标放进去并且点击的时候，相应的提示文字就没有了，等到鼠标移走的时候文字又会显示。 下面就是一个实现功能的例子： <form action="succ.html" method="post"> <input name="key" id="key" type="text" value="这里也许就有您要的答案" siz...
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： ...
监听软键盘的弹出与收起（近乎完美）
当你的才华满足不了你的野心的时候，那么你应该静下心来学习.
04-24 1万+
监听软键盘的弹出与收起的实现方法 由于这周末单休，然后，然后，然后 我一个不小心几乎是睡了一天，深感恐怖，于是我觉得我得做点什么，就想到了前几天两个群友问的关于软键盘的问题，正好我之前在工作中处理过，所以便写个博客记录分享一下 在这里，我写两个实现的方法。 1.是利用OnLayoutChangeListener的监听，在这里我简单的说下过程，因为应群友大大的建议，写的注释还是挺多的，也比较简
JS：onfocus和onblur 事件应用举例
12-30
JS：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框激活时展示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
input输入框的一些常用事件
Tyche_ya的博客
10-12 5809
写在input框里：<input type=“text” οnfοcus=“A();也可以通过js给input dom元素添加相应的事件，如：document.getElementByTagName(‘input’).
在js和html标签中input onfocus的不同用法
jinglier520的专栏
05-27 1925
在html标签中： 在js中添加标签： \:
关于input提示文字的几种实现方式
热门推荐
AloneDonkey的专栏
09-19 1万+
$(function(){         $('#txt3').placeholder({word:'请输入提示文字'})     }) /*placeholder.js*/ ~function(){     /**  * PlaceHolder组件  * $(input).placeholder({  *   word:     // @string 提示文本  *
将HTML文本框设为不可编辑文本框。
weixin_34272308的博客
01-05 152
将HTML文本框设为不可编辑文本框。 方法1: onfocus=this.blur() <input type="text" name="input1" value="不可编辑文本框" onfocus=this.blur()> 方法2:readonly <input type="text" name="input1" value="不可编辑文本框" readon...
input如何禁止文本框输入的方法
秋霜梦红尘的博客
07-27 1457
禁止文本框输入有以下四种方法： 1.设置input为只读状态，代码如下： <input type="text" readonly="readonly" value="只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。"> 2.设置input为不用状态，代码如下： <input type="text" disabled="disabled" value="被禁用的 input 元素既不可用，也不可点击"> 3.设置为可操作，但不能输入，代
Input文本框设置和移除默认值
不忘初心的博客
11-10 4828
1.可以用简单的方式，就是给input文本框加上onfocus属性，如下代码：      onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; '         onblur='if(this.value==""){this.value="请输入关键字进行搜索";};'>    其实onfocus属性挺好用的，还可以在通过onfo
表单事件 onfocus与onblur,以及onsubmit与onreset
qq_38384536的博客
06-27 1005
表单事件 onblur 元素失去焦点 onfocus 元素获得焦点 onreset 重置按钮被点击 onsubmit 提交按钮被点击 onchange 内容改变时触发
表单事件form input
hly@小贺
11-14 566
事件 列举 表单事件7个: focus, blur, input, select, change, reset, submit 等 <form action=""> <label for=""></label> <textarea name="" id="" cols="30" rows="10"></...
onfocus 失去焦点事件
05-24
onfocus 是一个 HTML 元素的事件属性，用于指定在元素获取焦点时执行的 JavaScript 代码。相应地，失去焦点事件则是 onblur 属性，用于指定在元素失去焦点时执行的 JavaScript 代码。例如： ``` <input type="text" onfocus="alert('输入框获得焦点了！')" onblur="alert('输入框失去焦点了！')"> ``` 在上面的例子中，当这个文本框获得焦点时，会弹出一个警示框，显示“输入框获得焦点了！”；当文本框失去焦点时，会弹出另一个警示框，显示“输入框失去焦点了！”。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值