【基础】input标签输入框内的输入事件详细分析

简介: 【基础】input标签输入框内的输入事件详细分析

今天项目上用到了oninput事件,顺便就记录下表单常用事件。

1.onblur:元素失去焦点时触发

Onblur 经常用于表单验证,所有主要浏览器都支持 onblur 事件

<input type="text" onblur="myFunction()">

复制

支持该事件的 HTML 标签:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, 
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, 
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, 
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, 
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
<th>, <thead>, <tr>, <tt>, <ul>, <var>

复制

2.onchange:表单元素的内容改变时触发

当用户改变input输入框内容时执行,也可用于单选框与复选框改变后触发的事件,所有主要浏览器都支持。

<input type="text" onchange="myFunction()">

复制

支持该事件的 HTML 标签:

<input type="text">, <select>, <textarea>

复制

3.onfocus:元素获取焦点时触发

当 input 输入框获取焦点时执行,通常也用于 <input>, <select>, 和<a>,所有主要浏览器都支持 onfocus 事件。

<input type="text" onfocus="myFunction()">

复制

支持该事件的 HTML 标签:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, 
<blockquote>, <button>, <caption>, <cite>, <dd>, <del>,
<dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, 
<frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, 
<img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, 
<small>, <span>, <strong>, <sub>, <sup>, <table>, 
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

复制

4.onfocusin:元素即将获取焦点时触发

onfocusin 事件在一个元素即将获得焦点时触发,onfocusin 事件类似于 onfocus 事件。主要的区别是 onfocus 事件不支持冒泡。因此,如果你想知道元素或者其子元素是否获取焦点,需要使用 onfocusin 事件。

<input type="text" onfocusin="myFunction()">

复制

支持该事件的 HTML 标签:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, 
<blockquote>, <button>, <caption>, <cite>, <dd>, <del>,
<dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, 
<frame>, <frameset>, <h1> to <h6>, <hr>, <i>, <iframe>, 
<img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, 
<small>, <span>, <strong>, <sub>, <sup>, <table>, 
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, 
<tr>, <tt>, <ul>, <var>

复制

提示:虽然 Firefox 不支持  onfocusin 事件, 但你可以通过使用 onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否获取焦点。

5.onfocusout:元素即将失去焦点时触发

onfocusout 事件在元素即将失去焦点时触发。onfocusout 事件类似于 onblur 事件。主要的区别是 onblur 事件不支持冒泡。因此,如果你需要查看元素或其子元素是否获取焦点,需要使用 onfocusout 事件。

<input type="text" onfocusout="myFunction()">

复制

支持该事件的 HTML 标签:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, 
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, 
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>, <i>, 
<iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, 
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, 
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, 
<th>, <thead>, <tr>, <tt>, <ul>, <var>

复制

提示:虽然 Firefox 不支持 onfocusout 事件, 但你可以通过使用 onfocus (使用addEventListener()方法的可选参数 useCapture)的捕获监听事件来查看元素或其子元素是否失去焦点。

6.oninput:元素获取用户输入时触发

oninput 事件在用户输入时触发,也可用于 <textarea> 元素的值发生改变时触发。该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

<input type="text" oninput="myFunction()">

复制

支持该事件的 HTML 标签:

<input> <textarea>

复制

7.onsearch:用户向搜索域输入文本时触发

onsearch 事件在用户按下"ENTER(回车)" 按键或点击 type="search" 的 <input> 元素的 "x(搜索)" 按钮时触发。

<input type="search" onsearch="myFunction()">

复制

支持该事件的 HTML 标签:

<input type="search">

复制

8.onselect:用户选取文本时触发

onselect 事件会在文本框中的文本被选中时发生。

<input type="text" onselect="myFunction()">

复制

支持该事件的 HTML 标签:

<input type="text">, <textarea>

复制


相关文章
|
7月前
|
人工智能 前端开发 IDE
仅凭几张图片,我们是如何让 AI 自动生成 70% 可用前端代码的?
本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下,如何通过 AI 技术实现高质量前端代码自动生成。
仅凭几张图片,我们是如何让 AI 自动生成 70% 可用前端代码的?
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
407 0
|
4月前
|
人工智能 自然语言处理 机器人
保姆级教学:OpenClaw(Clawdbot)阿里云及本地部署接入伟达免费API全指南
在AI工具使用中,Token消耗过高始终是用户的核心痛点,而2026年英伟达推出的免费API彻底解决了这一问题——支持GLM5、GLM4.7、MiniMax M2.1、Kimi2.5等主流模型,仅限制40rpm请求速率,无其他配额约束,成为OpenClaw(原Clawdbot)的最佳算力搭档。OpenClaw作为高性能AI自动化代理,结合英伟达免费API后,可实现零成本的自然语言推理与自动化执行,再搭配飞书等即时通讯工具的交互能力,能打造出高效、便捷的全场景AI助手。
8065 5
|
小程序 JavaScript
微信小程序使用echarts图表(ec-canvas)
这篇文章介绍了在微信小程序中使用`ec-canvas`集成echarts图表的方法,包括解决加载时报错的问题、配置图表组件、以及在小程序页面中引入和使用这些图表组件的步骤。
2714 1
微信小程序使用echarts图表(ec-canvas)
|
10月前
|
数据采集 编解码 监控
Go语言实战案例:使用channel实现生产者消费者模型
本文是「Go语言100个实战案例 · 网络与并发篇」第4篇,通过实战案例详解使用 Channel 实现生产者-消费者模型,涵盖并发控制、任务调度及Go语言并发哲学,助你掌握优雅的并发编程技巧。
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
426 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
舵机和电机
【11月更文挑战第12天】
520 3
|
存储 NoSQL 关系型数据库
【MongoDB 专栏】MongoDB 与传统关系型数据库的比较
【5月更文挑战第10天】本文对比了MongoDB与传统关系型数据库在数据模型、存储结构、扩展性、性能、事务支持、数据一致性和适用场景等方面的差异。MongoDB以其灵活的文档模型、优秀的扩展性和高性能在处理非结构化数据和高并发场景中脱颖而出,而关系型数据库则在事务处理和强一致性上更具优势。两者各有适用场景,选择应根据实际需求来定。随着技术发展,两者正相互融合,共同构建更丰富的数据库生态。
1273 1
【MongoDB 专栏】MongoDB 与传统关系型数据库的比较
|
JavaScript
Vue3基础(22)___vue3中使用$forceUpdate
本文介绍了在Vue 3中如何使用`$forceUpdate`来强制更新组件,通过`getCurrentInstance`方法获取到组件实例后调用。
1610 0
|
前端开发 UED
CSS动画(轮播图)
CSS动画(轮播图)