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

最新推荐文章于 2025-07-20 09:10:18 发布
原创 最新推荐文章于 2025-07-20 09:10:18 发布 · 3.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个简单的HTML示例，展示了如何使用onfocus和onblur事件来改变输入框内文本的大小写。当输入框获得焦点时，所有文本变为小写；当输入框失去焦点时，所有文本则变为大写。

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" onblur="upperCase()" onfocus="lowerCase()"/>
</body>

</html>

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

详解HTML onfocus获得焦点和onblur失去焦点事件
09-22
主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
文本框(input)获取焦点(onfocus)时样式改变的示例代码
09-04
值得注意的是，这里使用了`addEventListener`方法来添加事件监听器，这是一种更现代且可维护性更好的方式，相比直接赋值给`onfocus`和`onblur`属性。这种方法允许我们为同一个事件添加多个处理函数，而不会覆盖原有...
动态操作CSS文本框失去焦点变颜色(注册onblur事件)
qq_32077521的博客
10-21 1985
<!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 350
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-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件
KiCCZha的博客
12-24 1293
5.3 onkeypress 某个键盘按键被按下并松开。4.4 onmouseover 鼠标被移动到某个元素上。4.1 onmousedown 鼠标按钮被按下。5.1 onkeydown 某个键盘按键被按下。4.2 onmouseup 鼠标按钮被松开。5.2 onkeyup 某个键盘按键被松开。6.1 onchange 域的内容被改变。7.1 onsubmit 确认按钮被点击。1.2 ondblclick:双击事件。7.2 onreset 重置按钮被点击。1.1 onclick:单击事件。
JavaScript中的onblur（失去焦点）应用
qiuqiule6的博客
02-16 6412
提示：onblur 相反事件为 onfocus 事件。ondblclick— 鼠标左键双击事件。onmouseover— 鼠标移入事件。onmouseout-- 鼠标移出事件。onmousemove— 鼠标移动事件。onmousedown— 鼠标按下事件。oninput---- 内容改变事件。onclick— 鼠标左键单击事件。onmouseup— 鼠标抬起事件。onkeydown— 键盘按下事件。onchange— 内容改变事件。onkeyup— 键盘抬起事件。onblur— 失去焦点事件。
css中链接a的样式 a{blr:expression(this.onFocus=this.blur())}
sunsineq的专栏
07-14 1234
a{blr:expression(this.onFocus=this.blur())} blr没有特殊意思，expression 条件，这句话的意思是链接 a 在获得焦点的同时失去焦点。 如果你用的是图片链接什么的，他不会显示周边的虚线。 此段代码的作用是清除 A 链接在点击时会产生虚线的问题。 三种写法： 1、正常写法 1 <ahref="#" onfocus=this.blur();>链接标题</a> 2、CSS写法 .
HTML事件：onfocus与onblur详解及应用
在B/S（Browser/Server）架构中，HTML常与CSS、JavaScript一起用于浏览器端，而服务器端可能使用ASP(.NET)、PHP、JSP等技术来处理请求并生成动态内容。此外，C/S（Client/Server）结构则涉及客户端应用程序和服务器...
11、Web开发中的CSS与JavaScript应用
blue42的博客
07-20 28
本博客详细探讨了Web开发中CSS与JavaScript的应用。CSS用于实现页面的样式设计，包括标签的选中、悬停等效果；JavaScript则为页面赋予交互功能，涵盖表单预验证、动画效果等。同时，对代码进行了深入分析和优化，提高了可读性、可维护性和性能，为开发者提供了实用的技巧与建议。
onfocus事件
最新发布
08-14
我们被要求回答关于JavaScript中onfocus事件的使用方法和示例。根据引用，特别是引用[1]和[2]，我们知道onfocus事件在元素获得焦点时触发。同时，引用[4]给出了一个常见的示例：当输入框获得焦点时，如果里面的值是...
php onblur=,onblur属性_用法示例-javascript词典-js编程词典-php中文网
weixin_39847437的博客
03-26 217
on英 [ɒn] 美 [ɑ:n]prep.(表示方向)向;(表示对象)对;(表示位置)在…上;(表示时间)在…之时adv.(放，穿，连接)上;向前，(继续)下去adj.活动着的情况，状态;使用着的;发生着的;计划中的blur英 [blɜ:(r)] 美 [blɚ]n.污迹，污斑;模糊不清的事物;暧昧不明vt.& vi.涂污，弄脏;(使)变模糊，(使)难以区分第三人称单数： blurs...
HTML中onblur事件的使用
技术研究中心
06-29 2287
在HTML中，onblur事件是指当元素失去焦点时触发的事件。失去焦点意味着用户从当前输入框或其他可输入元素转移到另一个元素上。例如，当用户在输入框中输入完内容后，点击页面的其他地方或按下Tab键切换焦点时，就会触发onblur事件。本文深入探讨了HTML中onblur事件的概念、基本语法及其在实际开发中的应用场景。通过使用onblur事件，开发者可以实现表单验证、用户交互优化和自动保存等功能，从而提升页面的交互性和用户体验。
html onblur 函数执行了2次,JavaScript“onblur事件”调用函数失效 原因与解决方法
weixin_28987001的博客
06-23 1522
由于JavaScript事件有很多，例如：鼠标事件：onclick键盘事件：onkeydown、onkeypress表单事件：onblur、onchange窗口事件属性：onerror、onload因此，如果你遇到其它的JavaScript事件调用函数失效，解决方法也同理。以我这里为例子：今天我在调试代码的时候，发现我的纯原生JavaScript代码中的onblur事件调用函数失效了，没有调用成功...
JavaScript的onfocus与onblur用法
weixin_42232623的博客
05-21 1353
在做登录的时候，登录界面的文本框中会有一段文字，当鼠标点击文本框时，框内文字消失，当鼠标离开时，那行字又出现了，但当输入文本时那行字便不再显现，此特效是如何实现的呢？实现原理如下 效果如下: 点击用户名前: 点击用户名后 代码如下 <input type="text" name="username" value="请输入用户名" onfocus="this.value = '';" ...
实用的输入框提示语 onfous(),onblur()
weixin_34107955的博客
08-07 200
代码 &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.
onblur属性详解
热门推荐
qq_39429962的博客
10-09 1万+
onblur 事件会在对象失去焦点时发生，所谓焦点指的就是当前操作的对象，当我们操作一个div时，这个div就获取了焦点，那么onblur的作用是什么呢，在我们需要实现类似点击其他部分取消当前下拉框显示的功能时，onblur属性就要开始显现作用了。 下面是一个实例： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt...
文本框内容的隐藏与显示（ onfocus 与 onblur ）
ice_yr的博客
06-25 628
获得焦点： onfocus 失去焦点： onblur <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { color: #999999; } </style> </head> <body> &lt
掌握JavaScript的onfocus与onblur事件监听
weixin_36074800的博客
06-06 1258
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值