当前位置： 首页 > news >正文

在 HTML 中，＜input＞ 元素支持的事件汇总

news 2025/11/6 4:07:38

在 HTML 中，<input> 元素支持多种事件，这些事件可以在用户与输入字段交互时触发。以下是一些常见的 <input> 事件：

  1. input:

    • 当 <input> 元素的值发生变化时触发。
    • 适用于文本、数字、日期等类型的输入。

  2. change:

    • 当 <input> 元素的值发生变化并且失去焦点（blur）时触发。
    • 适用于文本、复选框、单选按钮等。

  3. focus:

    • 当 <input> 元素获得焦点时触发。
    • 例如，当用户点击或使用 Tab 键导航到输入字段时。

  4. blur:

    • 当 <input> 元素失去焦点时触发。
    • 例如，当用户点击页面的其他地方或按 Tab 键离开输入字段时。

  5. keydown:

    • 当用户按下键盘上的任意键时触发。
    • 可以用于捕获特定的按键操作。

  6. keyup:

    • 当用户释放键盘上的任意键时触发。
    • 通常用于检测按键释放后的状态。

  7. keypress:

    • 当用户按下并释放一个字符键时触发。
    • 注意：这个事件在现代浏览器中已经被 beforeinput 和 input 事件所取代。

  8. click:

    • 当用户点击 <input> 元素时触发。
    • 对于按钮和复选框特别有用。

  9. mousedown:

    • 当用户按下鼠标按钮时触发。
    • 适用于需要捕获鼠标按下动作的情况。

  10. mouseup:

    • 当用户释放鼠标按钮时触发。
    • 适用于需要捕获鼠标释放动作的情况。

  11. select:

    • 当用户选择 <input> 元素中的文本时触发。
    • 适用于文本输入字段。

  12. paste:

    • 当用户粘贴内容到 <input> 元素中时触发。
    • 可以用于处理粘贴的内容。

  13. cut:

    • 当用户剪切 <input> 元素中的内容时触发。
    • 可以用于处理剪切的内容。

  14. copy:

    • 当用户复制 <input> 元素中的内容时触发。
    • 可以用于处理复制的内容。

示例代码

以下是一个示例，展示了如何在 <input> 元素上绑定和处理一些常见的事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Input Events Example</title>
</head>
<body><input type="text" id="myInput" placeholder="Enter some text"><script>const inputElement = document.getElementById('myInput');// input 事件inputElement.addEventListener('input', (event) => {console.log('Input value changed:', event.target.value);});// change 事件inputElement.addEventListener('change', (event) => {console.log('Input value changed and lost focus:', event.target.value);});// focus 事件inputElement.addEventListener('focus', (event) => {console.log('Input field gained focus');});// blur 事件inputElement.addEventListener('blur', (event) => {console.log('Input field lost focus');});// keydown 事件inputElement.addEventListener('keydown', (event) => {console.log('Key pressed:', event.key);});// keyup 事件inputElement.addEventListener('keyup', (event) => {console.log('Key released:', event.key);});// click 事件inputElement.addEventListener('click', (event) => {console.log('Input field clicked');});// select 事件inputElement.addEventListener('select', (event) => {console.log('Text selected in input field');});// paste 事件inputElement.addEventListener('paste', (event) => {console.log('Pasted content:', event.clipboardData.getData('text'));});// cut 事件inputElement.addEventListener('cut', (event) => {console.log('Cut content:', event.clipboardData.getData('text'));});// copy 事件inputElement.addEventListener('copy', (event) => {console.log('Copied content:', event.clipboardData.getData('text'));});</script>
</body>
</html>

在这个示例中，我们为 <input> 元素绑定了多个事件处理器，并在控制台中输出相关信息。你可以根据需要添加更多的事件处理逻辑。

相关文章：

在 HTML 中，＜input＞ 元素支持的事件汇总

在 HTML 中&#xff0c;<input> 元素支持多种事件&#xff0c;这些事件可以在用户与输入字段交互时触发。以下是一些常见的 <input> 事件&#xff1a; input: 当 <input> 元素的值发生变化时触发。适用于文本、数字、日期等类型的输入。 change: 当 <inp…...

编程日记 2024/10/23 12:33:23

vue3【实战】 渲染 md 文件（markdown语法 .md后缀的文件）

1. 安装相关插件 npm i unplugin-vue-markdown markdown-it-prism prism unhead/vue2. 添加配置 src/main.ts // 给 md 文件创建头部 import { createHead } from unhead/vue // md 文件中代码高亮的样式 import prismjs/themes/prism.css // 自定义 md 文件的样式 import /as…...

编程日记 2024/10/23 12:32:22

Sora高端制造业WordPress外贸主题

Sora是一款专为高端制造业设计的WordPress主题&#xff0c;由国内知名wordpress开发团队简站wordpress主题开发&#xff0c;它以红色为主色调&#xff0c;适合外贸企业出海建独立站的模板。这个主题适用于WordPress 6.0及以上版本&#xff0c;并且只服务于真正有需要的用户。主…...

编程日记 2024/10/23 12:28:16

windows安装superset及各种问题解决

1,背景 先说说背景,之前在2月份已经安装过superset3.1.1,当时还没有提示SECRET_KEY异常,能正常运行,且已配置数据库连接. 2,报错信息及解决途径 1,创建admin时,提示Error! User already exists 这个是因为之前已经创建过admin用户,需要删除C:\Users\用户名\.superset下的.…...

编程日记 2024/10/23 12:25:13

JMeter模拟并发请求

PostMan不是严格意义上的并发请求工具&#xff0c;实际是串行的&#xff0c;如果需要测试后台接口并发时程序的准确性&#xff0c;建议采用JMeter工具。 案例&#xff1a;JMeter设置20个并发卖票请求&#xff0c;查看后台是否存在超卖的情况 方式一&#xff1a;一共10张票&…...

编程日记 2024/10/23 12:21:07

【小趴菜前端实习日记5】

实习日记5 一、vue3中如何使用router&#xff08;获取this)二、ts中用object定义类型太宽泛导致Ts无法推断出正确类型三、动态设置日记封面失败vite动态引入静态资源1.方法一vue3父子组件生命周期执行顺序 2.方法二3.方法三 四、打包问题总结1.The import.meta meta-property i…...

编程日记 2024/10/23 12:13:58

如何通过谷歌外推占据搜索引擎首页？

外贸企业在推广过程中&#xff0c;如何在谷歌搜索引擎中占据有利位置&#xff0c;获取更多曝光&#xff0c;GLB谷歌霸屏服务就可以派上用场。它通过高效的品牌外推策略&#xff0c;可以让你的企业信息在谷歌中实现“霸屏”效果&#xff0c;特别是长尾关键词的全面覆盖 很多企业…...

编程日记 2024/10/23 12:12:58

jmeter学习（6）逻辑控制器

1. 简单控制器 简单控制器用来存放组件的&#xff0c;没有提供什么逻辑功能。 2. 循环控制器 用来循环执行请求&#xff0c;可以配置循环次数。注意它与线程组、测试计划中的循环是相互独立的&#xff0c;比如在线程组中设置循环2次&#xff0c;循环控制器设置循环3次&#…...

编程日记 2024/10/23 12:11:57

Android14 和android12 在锁屏界面Keyguard输错5次密码后倒计时30秒时重启手机不显示倒计时

参考如下修改&#xff1a;Android9.0在锁屏界面Keyguard输错5次密码后倒计时30秒时重启手机不显示倒计时_android 锁屏密码输错5次-CSDN博客 android 14 修改如下&#xff1a; androidap/SYSTEM/frameworks/base$ git status Refresh index: 100% (47218/47218), done. HEAD d…...

编程日记 2024/10/23 12:09:55

智能时代摩托车一键启动无钥匙进入感受科技前线

向智能化与高性能迈进,技术创新与绿色转型引领摩托车行业智能化出行。 摩托车一键启动无钥匙进入功能是一种先进的车辆控制系统&#xff0c;它允许驾驶员在不使用传统机械钥匙的情况下&#xff0c;通过智能感应技术自动解锁和启动摩托车。这种系统通常包括一个智能钥匙&#x…...

编程日记 2024/10/23 12:07:53

需要补充的技能

密码管理 文件管理 人际管理 Microsoft365 teams和onedrive,outlook,sharepoint等 被问到自己不懂的问题的时候怎么迅速反应快速回答&#xff1f; 被帅锅的时候怎么解决&#xff1f; 谈判技巧&#xff1f; 说话的语速&#xff1f; 遇到解决不了的问题如何处理&#xff1f; 考…...

编程日记 2024/10/23 12:05:51

15分钟学 Go 第 15 天：映射（Map）

第15天&#xff1a;映射&#xff08;Map&#xff09; 学习目标 在本节中&#xff0c;我们将深入理解Go语言中的字典类型&#xff08;映射&#xff09;&#xff0c;通过例子与图示来帮助你掌握其使用方法。我们将涵盖以下几个方面&#xff1a; 概念定义创建和使用映射访问和更…...

编程日记 2024/10/23 12:03:49

element-plus 官方表格排序问题

element-plus 官方API 默认表格排序存在问题&#xff0c;一个list 被多组排序 修改后&#xff1a; 注意点&#xff1a; 这里一定要使用 sortable"custom"&#xff0c;自定义 sort-change 方法 使用 sortable true 的情况排序会冲突&#xff0c;出现莫名奇妙的问题…...

编程日记 2024/10/23 12:02:47

AI语音模型在家宽业务中的应用

在运营商家宽业务支撑场景中&#xff0c;存在多个APP和系统需要与装维人员交互&#xff0c;传统的功能按钮点击型操作交互界面&#xff0c;越来越难以满足装维人员工作提效的迫切需求。家宽施工调度系统所需的AI语音能力主要包括ASR&#xff08;音转字&#xff09;和TTS&#x…...

编程日记 2024/10/23 12:01:46

零七生活API-文字转语音API使用示例

//官网地址&#xff1a;零七生活API - 提供免费接口调用平台function getAud(){axios({method: get,url: https://api.oick.cn/api/txt?text你好&spd5&apikeyyourApikey,responseType: blob, // 确保 axios 处理为二进制数据}).then((response) > {// 将 Blob 转换…...

编程日记 2024/10/23 11:58:43

rpc的客户端为什么称为stub

1.client为什么是stub Stub 在分布式系统中是一种 代理对象&#xff08;Proxy Object&#xff09;&#xff0c;它本质上是一个在本地系统中扮演远程服务角色的代理。 在早期的 RPC 术语中&#xff0c;客户端端叫做 Stub&#xff0c;而服务器端的处理部分叫做 Skeleton。这种对…...

编程日记 2024/10/23 11:56:40

RHCE--nginx实现多IP访问多网站

方法一&#xff1a;nmtui 1.目录挂载 2.下载nginx 3.关闭防火墙 4.在一个网卡创建多个虚拟地址 1. 2. 3. 方法二&#xff1a;nmcil 1.手动配置 2.如图所示重新连接后创建ip成功 3.创建目录以及写入 结果...

编程日记 2024/10/23 11:54:38

TikTok运营对IP有什么要求？

TikTok在进行直播带货时&#xff0c;网络环境的配置尤为关键&#xff0c;网络质量直接影响到直播效果&#xff0c;因此选择稳定的IP地址很重要。那么&#xff0c;TikTok直播时该选择什么样的IP地址呢&#xff1f;接下来&#xff0c;我们来深入分析一下。 TikTok对IP地址的要求 …...

编程日记 2024/10/23 11:51:35

大白话讲解：多模态大模型综述，通俗易懂！

多模态大型语言模型&#xff08;Multimodal Large Language Models&#xff0c; MLLM&#xff09;的出现是建立在大型语言模型&#xff08;Large Language Models&#xff0c; LLM&#xff09;和大型视觉模型&#xff08;Large Vision Models&#xff0c; LVM&#xff09;领域不…...

编程日记 2024/10/23 11:50:32

大数据-184 Elasticsearch - 原理剖析 - DocValues 机制原理 压缩与禁用

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

编程日记 2024/10/23 11:49:31

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/11/5 11:52:58

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/11/4 10:31:04

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/8/29 10:53:38

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/10/30 5:57:55

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/11/2 8:58:17

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/11/4 1:35:04

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/11/3 21:36:57

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/10/27 8:07:15

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01