blur属性html,html中的onfocus和onblur是什么属性?怎么使用?

html中的onfocus和onblur是什么属性?怎么使用?本篇文章就给大家介绍onfocus属性和onblur属性是什么,让大家了解onfocus属性和onblur属性的简单用法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们要知道onfocus和onblur都是html的事件属性,接下来简单介绍一下这两个属性。

1、onfocus事件属性

onfocus 属性在元素获得焦点时被触发,即:获得焦点事件;常用于 、 以及 标签中。

注:onfocus 属性不适合用于以下元素中使用:、
、、、、、、

2、onblur事件属性

onblur 属性在元素失去焦点时触发,即:失去焦点事件;常用于表单验证代码(例如用户离开表单字段)中。

说明:

1、onfocus 属性与 onblur 属性是相反的。

2、所有主流浏览器都支持 onfocus 属性和 onblur 属性。

下面我们通过简单的代码示例来介绍onfocus 属性和 onblur 属性的用法。

html onfocus 事件属性的用法

代码示例:当输入字段获得焦点时触发函数。此函数改变输入字段的背景色(黄色)

function setStyle(x){

document.getElementById(x).style.background="yellow";

}

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

用户名:

密   码:

效果图:

f81279da3abad59c7471ca4f87704b83.png

html onblur 事件属性的用法

代码示例:当用户离开输入字段时对其进行验证:小写字母转大写

function upperCase(){

var x=document.getElementById("fname").value

document.getElementById("fname").value=x.toUpperCase()

}

请输入您的姓名,然后把焦点移动到字段外:

用户名(英文字符):

效果图:

368525d6225616fb044e9d80406ba264.png

总结:以上就是本篇文章所介绍的html onfocus和onblur事件属性的全部内容,大家可以自己动手编译试试,加深理解,希望能对大家的学习有所帮助。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值