html中onblur属性,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 事件属性的用法

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

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

用户名:
密码:

效果图：

html onblur 事件属性的用法

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

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

用户名(英文字符)：

效果图：

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

html中onblur属性,html中的onfocus和onblur是什么属性？怎么使用？相关推荐

在php中焦点事件,Js中的onblur和onfocus事件（图文教程）
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...
html中onfocus和onblur的使用
onfocus():鼠标点在onfocus所在的标签上面时 onblur():鼠标点在除onfocus所在标签的其他地方 form表单的的提交方式: 使用超链接提交: 先获取form标签,使用form ...
html5 lineheight属性,HTML中line-height的继承
原标题:HTML中line-height的继承 line-height 行高属性控制行与行之间的间距这个属性大家应该很熟悉,毕竟太常用了: 比如line-height:120% 和 line-he ...
python类中的属性分为类属性和实例属性两种_python中类和实例如何绑定属性与方法示例详解...
前言 python类与实例的方法的调用中觉得云里雾里,思考之后将自己的想法记录下,一来加深自己理解,巩固自己记忆,而来帮助一些想要学习python的朋友理解这门抽象的语言,由于Python是动态语言, ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
一个类的实例是另一个类的属性python_Python中的类属性和实例属性引发的一个坑...
问题今天在项目中遇到了个奇怪的问题,实例的一个时间属性并没有根据时间变化而变化,分析之后恍然大悟,总结下分享给大家.大家先看一段代码: import datetime import time cla ...
python中实例方法与实例属性-Python中的类属性和实例属性以及静态方法和类方法...
可以在Python的类定义中直接添加静态变量,如下例中的foo.此属性属于类C,可以直接通过C.foo访问,而无需实例化它.而实例属性则只存在于对象的实例中,这也就意味着,每一个不同的实例都有只属于自 ...
java 隐藏地址栏参数_要想在浏览器的地址栏上的URL中隐藏传输的参数,需要将form标签的method属性值设置为( )。 (5.0分)_学小易找答案...
[填空题]若在JSP页面的不同作用域中有相同名称的对象,且EL表达式中又省略了相应的作用域类型名,则系统将会按照 . . . 的先后顺序查找相应对象. (20.0分) [简答题]AJAX异步请求过程中 ...
基于继承类的属性模版中无法绑定的原因和解决方法
原文:基于继承类的属性模版中无法绑定的原因和解决方法这个的晚上想学学WPF 做一个类似于ERP 左边菜单.构思一下思路 ...... 创建一个类基于Expander类. 1 public class ...
PHP中普通方法如何调用静态属性,php中的静态属性和静态方法如何调用
静态属性.方法(包括静态与非静态)在内存中,只有一个位置(而非静态属性,有多少实例化对象,就有多少个属性). (推荐教程:php图文教程) 实例: header("content-type: ...

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

html中onblur属性,html中的onfocus和onblur是什么属性？怎么使用？相关推荐

最新文章

热门文章