CSS中onfocus=""与onblur=""函数用法

最新推荐文章于 2024-06-29 11:18:05 发布
最新推荐文章于 2024-06-29 11:18:05 发布
阅读量3.3k 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaokangmiclong/article/details/50587764
版权

onfocus函数指获取焦点是触发事件，onblur函数则是指失去焦点时触发的事件。如下例子：

<html>

<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
function lowerCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toLowerCase()
}
</script>

</head>

<body>
输入一串英文字母：
<input type="text" id="fname" οnblur="upperCase()" οnfοcus="lowerCase()"/>
</body>

</html>

其中toUpperCase()是将英文字符转换为大写，而toLowerCase()相反

xiaokangmiclong
关注
专栏目录
html onblur 函数执行了2次,JavaScript“onblur事件”调用函数失效 原因与解决方法
weixin_28987001的博客
06-23 1381
由于JavaScript事件有很多，例如：鼠标事件：onclick键盘事件：onkeydown、onkeypress表单事件：onblur、onchange窗口事件属性：onerror、onload因此，如果你遇到其它的JavaScript事件调用函数失效，解决方法也同理。以我这里为例子：今天我在调试代码的时候，发现我的纯原生JavaScript代码中的onblur事件调用函数失效了，没有调用成功...
前端速成教程（HTML、CSS、JS、Vue…）
www.h y p e r p l a s m a.top
05-06 3374
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
文本框(input)获取焦点(onfocus)时样式改变的示例代码
09-04
本篇文章主要是对文本框(input)获取焦点(onfocus)时样式改变的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
动态操作CSS文本框失去焦点变颜色(注册onblur事件)
qq_32077521的博客
10-21 1930
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> </head>...
css焦点_CSS：焦点内
culuo8053的博客
08-10 300
css焦点Using :hover to display additional information or elements is a very useful technique but a big drawback to using the hover pseudo-class is that they are usually not accessibility-friendly. Not ...
css中链接a的样式 a{blr:expression(this.onFocus=this.blur())}
sunsineq的专栏
07-14 1153
a{blr:expression(this.onFocus=this.blur())} blr没有特殊意思，expression 条件，这句话的意思是链接 a 在获得焦点的同时失去焦点。 如果你用的是图片链接什么的，他不会显示周边的虚线。 此段代码的作用是清除 A 链接在点击时会产生虚线的问题。 三种写法： 1、正常写法 1 <ahref="#" onfocus=this.blur();>链接标题</a> 2、CSS写法 .
JavaScript中的onblur（失去焦点）应用
qiuqiule6的博客
02-16 4608
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
详解HTML onfocus获得焦点和onblur失去焦点事件
09-22
HTML中的`onfocus`和`onblur`是两个非常重要的事件处理属性，它们主要用于处理用户交互，特别是与表单元素的交互。这两个事件是表单验证和动态界面更新的基石。 `onfocus`事件是在一个元素（通常是可聚焦的元素如`...
HTML事件：onfocus与onblur详解及应用
在B/S（Browser/Server）架构中，HTML常与CSS、JavaScript一起用于浏览器端，而服务器端可能使用ASP(.NET)、PHP、JSP等技术来处理请求并生成动态内容。此外，C/S（Client/Server）结构则涉及客户端应用程序和服务器...
CSS样式设计：文本框变形与交互效果
本文主要介绍了如何使用CSS来定制文本框的样式，包括鼠标悬停时颜色变化、提示信息显示与消失、特定样式的输入框以及背景透明和背景色动态变换等效果。 在网页设计中，CSS（层叠样式表）是用于控制网页元素外观的...
HTML中onblur事件的使用
最新发布
技术研究中心
06-29 1260
在HTML中，onblur事件是指当元素失去焦点时触发的事件。失去焦点意味着用户从当前输入框或其他可输入元素转移到另一个元素上。例如，当用户在输入框中输入完内容后，点击页面的其他地方或按下Tab键切换焦点时，就会触发onblur事件。本文深入探讨了HTML中onblur事件的概念、基本语法及其在实际开发中的应用场景。通过使用onblur事件，开发者可以实现表单验证、用户交互优化和自动保存等功能，从而提升页面的交互性和用户体验。
CSS-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件
weixin_43998127的博客
10-13 4483
CSS事件 1.点击事件 1.1 onclick:单击事件 1.2 ondblclick:双击事件 2.焦点事件 2.1 onblur: 失去焦点 2.2 onfocus: 元素获得焦点 3.加载事件 onload: 一张页面或一幅图像完成加载。 4.鼠标事件 4.1 onmousedown 鼠标按钮被按下 4.2 onmouseup 鼠标按钮被松开 4.3 onmousemove 鼠标被移动 4.4 onmouseover 鼠标被移动到某个元素上 4.5 onmouseout 鼠标从某元素移开 5.键盘事
实用的输入框提示语 onfous(),onblur()
weixin_34107955的博客
08-07 162
代码 &lt;input name="searchkey" value="请输入图片关键字" size="15" class="t_input hui9" type="text" onfocus="if(this.value=='请输入图片关键字'){this.value='';this.className='t_input';}" onblur="if(this.
文本框内容的隐藏与显示（ onfocus 与 onblur ）
ice_yr的博客
06-25 574
获得焦点： onfocus 失去焦点： onblur <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { color: #999999; } </style> </head> <body> &lt
JS中onblur总结
qq_30359369的博客
08-05 7276
JS中onblur总结 #第一种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"id="...
HTML onfocus （获得焦点）和 onblur （失去焦点）
热门推荐
ssisse的博客
09-07 4万+
HTML onfocus 事件属性 定义和用法 onfocus 属性在元素获得焦点时触发。 onfocus 常用于 、 以及 . 提示：onfocus 属性与 onblur 属性相反。 注释：onfocus 属性不适用于以下元素：、、、、、、、、、 或 。 实例 当输入字段获得焦点时触发函数。此函数改变输入字段的背景色 function s
[DOM] 给DIV或HTML所有元素增加onfocus和onblur事件
huang100qi的专栏
11-01 977
默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的，经我长久论证因为他们不具有tab属性，所以只要我们创建tab，那么任何标签都可以具有tab属性。 什么标签具有tab呢？显然input和a是得天独厚的具有，我们经常用键盘上的tab键进行移动光标的时候，我们发现光标只在具有tab属性的元素上进行跳转。 我们现在来让div拥有tab并具有onfucus
JavaScript的onfocus与onblur用法
qq_34038368的博客
06-05 2万+
在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下首先，先看一下效果图点击前点击后关键代码如下&lt;input type="text" name="username" value="请输入用户名" onfocus="this.value = '';" onblur="...
onblur属性详解
qq_39429962的博客
10-09 1万+
onblur 事件会在对象失去焦点时发生，所谓焦点指的就是当前操作的对象，当我们操作一个div时，这个div就获取了焦点，那么onblur的作用是什么呢，在我们需要实现类似点击其他部分取消当前下拉框显示的功能时，onblur属性就要开始显现作用了。 下面是一个实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt...
<!DOCTYPE html> <html> <head>     <meta charset="UTF-8" />     <title>title</title>     <style>         input{         background-color: rgb(160, 162, 164);         }         </style>     <script src=>         </script>         <script>             function $(id){                 return document.getElementById(id);             }             function clear1(obj){                 obj.value="";                 obj.style.backgroundColor="white";             }             function chkName(){                  var username=$("username").value;                  if(username==null||username=="")                  $("nameMsg").innerHTML="用户名不能为空";                  else                  if(username.length<3||username.length>15){                     alert('用户名长度应在3-15之间');                  }                 }                 function chkPwd(){                     var password=$("password").value;                  if(password==null||password=="")                  $("pwdMsg").innerHTML="密码不能为空";                  else                  if(password.length<3||password.length>15){                     alert('密码长度应在3-15之间');                 }              }             </script> </head> <body>     <form>     用户名<input type="text" id="username"name="username" value="请输入3-15个字符用户名"         onfocus="clear1(this)"  onblur="chkName()"/><span id="nameMsg"></span><br/>     密码<input type="password"name="password"id="password" onfocus="clear1(this)"onblur="chkPwd()"/>     <span id="pwdMsg"></span><br/>     </form> </body> </html>
06-03
这是一个基本的 HTML 页面，包含一个表单，表单中有用户名和密码的输入框，以及对应的信息提示元素。页面使用了一些 CSS 样式来设置输入框的背景颜色，当输入框获得焦点时会清空原有的提示信息，失去焦点时会触发相应的验证函数来检查输入的有效性。同时页面还引入了一个 JavaScript 脚本文件，其中定义了一些函数来处理表单输入框的验证和清空操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值