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

article/2025/10/23 6:27:20

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 事件属性的用法

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

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

用户名:
密   码:

效果图:

040a89b94e120374af5e6487dbe29399.png

html onblur 事件属性的用法

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

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

用户名(英文字符):

效果图:

f4bda485069503b6c33c8ef95f878b88.png

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


http://chatgpt.dhexx.cn/article/M2UnNHAa.shtml

相关文章

事件绑定(onclick,onfocus,onblur)

事件绑定(onclick,onfocus,onblur) 学习路线:JavaScript基础语法(输出语句)->JavaScript基础语法(变量)->JavaScript基础语法(数据类型)->JavaScript基础语法(运算符&…

js——input获取焦点-onfocus和失去焦点-onblur 自动获取焦点-autofocus=autofocus onchange 事件会在域的内容改变时发生

js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus“autofocus” & onchange 事件会在域的内容改变时发生 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…

js中的focus()

eg&#xff1a; function submitForm(){ var title $("#title").val(); var content ue.getContent(); if(title.length>100){ $.messager.alert("提示","<br>公告标题超过字数限制!","info"); $("#titl…

HTML onfocus (获得焦点)和 onblur (失去焦点)

HTML onfocus 事件属性 定义和用法 onfocus 属性在元素获得焦点时触发。 onfocus 常用于 <input>、<select> 以及 <a>. 提示&#xff1a;onfocus 属性与 onblur 属性相反。 注释&#xff1a;onfocus 属性不适用于以下元素&#xff1a;<base>、<bdo&…

multisim14

multisim14 安装之后&#xff0c;打开却无法使用&#xff0c;提示 不知道为什么会出现这种情况&#xff0c;望大神告知

multisim14安装后怎么汉化(超详解)

当有些学生开始装multisim时&#xff0c;有的安装不是汉化&#xff0c;想着是不是软件语言设置上原因&#xff0c;其实是缺少汉化包&#xff0c;当使用multisim时&#xff0c;对仪器图标倍感陌生&#xff0c;还有那些英语不好令人作呕的英文栏&#xff0c;这时想把该软件汉化&a…

Multisim12\Multisim14访问主数据库失败的解决方法

Multisim12\Multisim14访问主数据库失败的解决方法 系统WIN10 安装Multisim之后访问主数据库失败&#xff0c;访问企业数据失败&#xff0c;访问用户数据库失败&#xff0c;接连三个确定&#xff0c;然后就是元器件库一个文件也没有&#xff0c;以为是安装破解出了错&#xf…

Multisim14安装报错fatal error!Required NIPathsDir property NISHAREDDIR is undefined.

在该过程中&#xff0c;一直报错。。。 已经尝试过下载了NI的卸载软件然后重下没用。手动设置了系统变量还是没用。目前还是无法解决该问题。绿条还是能加载&#xff0c;只是加载到满时就不再动了&#xff0c;点击右边的确定就又会同时关闭。。。 作业实验报告还需要这个软件&…

multisim14 电流探针在哪儿

multisim14笔记 第一种方法&#xff1a;Place-probe&#xff0c;即可看见各种探头 第二种方法&#xff1a;直接在工具栏中添加

之前安装过Multisim14,再次安装失败的解决方法

## 之前安装过Multisim14&#xff0c;再次安装失败的解决方法 之前曾因为课程设计从公众号&#xff08;软件安装管家&#xff09;中安装过一次Multisim 14.0&#xff0c;后来以为没用了便草草一卸载以为万事大吉&#xff0c;不料不仅现在要重新使用而且安装出现特殊情况&#x…

【Multisim14】运行10版本文件时数码管一直显示为0的问题

解决办法&#xff1a;RefDes中不使用中文 问题发现过程&#xff1a; 1. 该文件是之前在Multisim10上完成的&#xff0c;今天在Multisim14运行是发现数码管一直显示为0。 2. 直接替换数码管后&#xff0c;依旧出现此问题。 3. 怀疑是输出到数码管的导线存在问题&#xff08;但电…

Multisim14访问主数据库失败的解决方法

Multisim14访问主数据库失败的解决方法 版本Multisim14.0 安装Multisim之后访问主数据库失败&#xff0c;然后就是元器件库一个文件也没有。 捣鼓了几天后&#xff0c;终于能用了&#xff0c;现在整理下可能的解决方法&#xff1a; 前俩个方法是某大佬的研究&#xff0c;在此附…

Multisim14 电子时钟(拥有定时闹钟、设置时间、全局复位功能)

详细请看https://afdian.net/item/914db14caed511eda23852540025c377 详细请看

单片机实验中用到的元器件(Multisim14)

文章目录 单片机实验中用到的元器件&#xff08;Multisim14&#xff09;发光二极管开关电阻电源地带小数点的共阳数码管8位的电阻排8位的拨码开关三极管继电器白炽灯交流电源译码器芯片74LS138比较器LM393可调电位器三极管2SC1815 单片机实验中用到的元器件&#xff08;Multisi…

基于Multisim14的弱信号放大电路的设计与仿真

摘要&#xff1a;本文通过有效放大采集弱信号,经Multisim 14仿真验证,放大电路输出,波形形状不变、幅值增加,实现弱信号放大,Multisim14仿真软件可以放大电路的电压、选择性等参数,通过测试并仿真分析,结果直观、精确,具有强大仿真分析功能,在实现高频电路分析和设计方面高效可…

Multisim14彻底卸载清除/NI Error Reporting Server

之前上课时候老师让下载这个软件&#xff0c;后面发现启动项有个不认识的东西&#xff0c;结果发现室这个软件干的好事&#xff0c;现在要卸载&#xff0c;用自带的卸载程序就好了 在之前安装的文件夹搜uninst 再点击全部删除 等着就好了 会比较慢 重启电脑&#xff0c;卸载…

Multisim14 安装出错情况说明,以及解决办法

出现如下情况的 使用NI删除工具显示&#xff1a; 发现National Instruments共享组件&#xff0c;与任何产品均无关联。是否删除这些共享组件? 在安装Multisim14时候&#xff0c;显示&#xff1a; There are no notifications for your products. 具体的情况就是 第一次安装…

基于multisim14的函数信号发生器仿真

基于multisim14的函数发生器仿真&#xff0c;第一级是方波产生&#xff0c;第二级是三角波&#xff0c;第三级是正弦波。利用可调电阻可以调节方波的占空比&#xff0c;三角波的电压和正弦波的电压&#xff0c;仿真如图。 RMB15&#xff0c;需要带上你的联系方式联系方式私聊…

Multisim14实现逻辑函数的化简与变换

Multisim是美国国家仪器(NI) 有限公司推出的以Windows为基础的仿真工具,适用于板级的模拟/数字电路板的设计工作。它包含了电路原理图的图形输入、电路硬件描述语言输入方式,具有丰富的仿真分析能力。 在数字电路中,经常需要对逻辑函数进行化简和变换。本文以使用Multisim…

Multisim14安装教程(下载链接在文末)

目录 安装流程 1、选择下载的安装包&#xff0c;解压 2、双击运行EXE安装程序 3、点击确定 4、点击Unzip 5、点击确定 6、点击Install Ni Circuit Design Suite 14.0 7、填写任意信息&#xff0c;点击Next 8、点击否 9、选择安装路径&#xff0c;点击Next 10、点击N…