设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 133|回复: 10

详解HTML onfocus获得焦点和onblur失去焦点事件

[复制链接]
  • 打卡等级:无名新人
  • 打卡总天数:2
  • 打卡月天数:0
  • 打卡总奖励:43
  • 最近打卡:2024-08-26 11:26:22

8

主题

54

回帖

285

积分

中级会员

积分
285
发表于 2024-4-20 10:29:44 | 显示全部楼层 |阅读模式
HTML onfocus 事件属性
定义和用法
onfocus 属性在元素获得焦点时触发。
onfocus 常用于 <input>、<select> 以及 <a>.
提示:onfocus 属性与 onblur 属性相反。
注释:onfocus 属性不适用于以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
实例
当输入字段获得焦点时触发函数。此函数改变输入字段的背景色
  1. <script>
  2. function setStyle(x)
  3. {
  4. document.getElementById(x).style.background="yellow";
  5. }
  6. </script>
  7. </head>
  8. <body>

  9. <p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>

  10. First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
  11. Last name: <input type="text" id="lname" onfocus="setStyle(this.id)">

  12. </body>
复制代码
HTML onblur 事件属性
定义和用法
onblur 属性在元素失去焦点时触发。
onblur 常用于表单验证代码(例如用户离开表单字段)。
实例
当用户离开输入字段时对其进行验证:
  1. <script>
  2. function upperCase()
  3. {
  4. var x=document.getElementById("fname").value
  5. document.getElementById("fname").value=x.toUpperCase()
  6. }
  7. </script>
  8. </head>
  9. <body>

  10. <p>请输入您的姓名,然后把焦点移动到字段外:</p>
  11. 请输入您的姓名(英文字符):<input type="text" name="fname" id="fname" onblur="upperCase()">

  12. </body>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

1

主题

48

回帖

117

积分

注册会员

积分
117
发表于 2024-4-23 10:32:55 | 显示全部楼层
我完全同意你的观点

1

主题

49

回帖

120

积分

注册会员

积分
120
发表于 2024-7-27 08:52:21 | 显示全部楼层
我不太确定,可能需要再确认一下。

1

主题

35

回帖

94

积分

注册会员

积分
94
发表于 2024-8-6 15:31:51 | 显示全部楼层
让我们一起努力

5

主题

59

回帖

228

积分

中级会员

积分
228
发表于 2024-8-13 06:52:01 | 显示全部楼层
顶一个,观点非常中肯!

0

主题

68

回帖

135

积分

注册会员

积分
135
发表于 2024-8-21 12:35:20 | 显示全部楼层
让我们一起努力
发表于 2024-8-24 20:54:32 | 显示全部楼层
我想了解更多

1

主题

80

回帖

174

积分

注册会员

积分
174
发表于 2024-9-24 18:44:20 | 显示全部楼层
我不确定这个信息的准确性,请再确认一下

2

主题

63

回帖

170

积分

注册会员

积分
170
发表于 2024-10-10 23:29:05 | 显示全部楼层
确实牛逼

2

主题

44

回帖

132

积分

注册会员

积分
132
发表于 2024-11-9 12:00:42 | 显示全部楼层
已测试,非常不错
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-24 09:45 , Processed in 0.121304 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表