这篇文章主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML onfocus 事件属性

定义和用法

onfocus 属性在元素获得焦点时触发。

onfocus 常用于 <input>、<select> 以及 <a>.

提示:onfocus 属性与 onblur 属性相反。

注释:onfocus 属性不适用于以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。

实例

当输入字段获得焦点时触发函数。此函数改变输入字段的背景色

<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
 
<p>当输入字段获得焦点时触发函数。此函数改变输入字段的背景色。</p>
 
First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="setStyle(this.id)">
 
</body>

HTML onblur 事件属性

定义和用法

onblur 属性在元素失去焦点时触发。

onblur 常用于表单验证代码(例如用户离开表单字段)。

实例

当用户离开输入字段时对其进行验证:

<script>
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
 
<p>请输入您的姓名,然后把焦点移动到字段外:</p>
请输入您的姓名(英文字符):<input type="text" name="fname" id="fname" onblur="upperCase()">
 
</body>

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

最新资讯
统计学“明星”获国际大奖:称等待的结果是好的

统计学“明星”获国际

美国加州斯坦福大学统计学家Bradley Efron因首创Boots
恒星爆发为近距离观测中子星或黑洞诞生提供机遇

恒星爆发为近距离观测

对于许多天文学家来说,2018年将被作为“母牛”年来纪念
腾讯高开4.34% 第三季度财报超预期

腾讯高开4.34% 第三季

腾讯(00700.HK)开盘大涨4.34%,报284.00港元。目前,腾讯
确保人工智能不作恶,谷歌为AI再上“紧箍咒”

确保人工智能不作恶,谷

谷歌认为,比起杀人AI机器人,我们更该担心的是AI偏见问题
惊人发现:人类肠道细菌或可通过血液进入大脑

惊人发现:人类肠道细菌

科学家近日首次发现了人脑中存在细菌的证据,说明这些细
比特币暴跌15%至逾一年新低 在美上市相关概念股下挫

比特币暴跌15%至逾一

比特币周三一度暴跌15%,报5347美元,自8月份以来首次跌破
最新文章
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

最近项目经理交小编一个活儿,需要在界面当中画一条竖线
多种实例解析HTML表单form的使用方法

多种实例解析HTML表单

这篇文章主要以多种实例的方式帮助大家了解分析HTML表