【基础】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>

复制


相关文章
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
506 0
|
10月前
|
人工智能 前端开发 IDE
仅凭几张图片,我们是如何让 AI 自动生成 70% 可用前端代码的?
本文系统总结了在仅有 UI 图片、无设计稿和交互说明的情况下,如何通过 AI 技术实现高质量前端代码自动生成。
仅凭几张图片,我们是如何让 AI 自动生成 70% 可用前端代码的?
|
11月前
|
移动开发 开发工具 Android开发
Uniapp与原生App集成的流程
Uniapp与原生App集成的流程
4047 156
|
9月前
|
边缘计算 运维 前端开发
阿里云 ESA “函数和Pages”全面开放|打通开发者“最后一公里”!
随着云计算技术的不断下沉,从中心云到边缘云的演进已成为不可逆转的趋势。为了满足开发者对更低延迟、更灵活部署以及更低运维成本的极致追求,阿里云 ESA 正式推出了备受期待的「函数和Pages」功能。这一发布标志着阿里云迈出了关键一步——让计算触手可及,让部署快如闪电。
阿里云 ESA “函数和Pages”全面开放|打通开发者“最后一公里”!
|
前端开发 Java
layui结合ajax实现下拉菜单联动效果
layui结合ajax实现下拉菜单联动效果
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
1438 8
舵机和电机
【11月更文挑战第12天】
621 3
|
SQL 数据库
`UPDATE FROM` 的语法以及常见的更新操作方式
`UPDATE FROM` 的语法以及常见的更新操作方式
3866 2
|
SQL 关系型数据库 数据库
在 Postgres 中使用 Between
【8月更文挑战第12天】
1485 4
|
移动开发 前端开发 安全
React Native环境搭建及配置问题
React Native环境搭建及配置问题
554 2