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

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

news 2026/3/31 1:15:00

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

input:
- 当 <input> 元素的值发生变化时触发。
- 适用于文本、数字、日期等类型的输入。
change:
- 当 <input> 元素的值发生变化并且失去焦点（blur）时触发。
- 适用于文本、复选框、单选按钮等。
focus:
- 当 <input> 元素获得焦点时触发。
- 例如，当用户点击或使用 Tab 键导航到输入字段时。
blur:
- 当 <input> 元素失去焦点时触发。
- 例如，当用户点击页面的其他地方或按 Tab 键离开输入字段时。
keydown:
- 当用户按下键盘上的任意键时触发。
- 可以用于捕获特定的按键操作。
keyup:
- 当用户释放键盘上的任意键时触发。
- 通常用于检测按键释放后的状态。
keypress:
- 当用户按下并释放一个字符键时触发。
- 注意：这个事件在现代浏览器中已经被 beforeinput 和 input 事件所取代。
click:
- 当用户点击 <input> 元素时触发。
- 对于按钮和复选框特别有用。
mousedown:
- 当用户按下鼠标按钮时触发。
- 适用于需要捕获鼠标按下动作的情况。
mouseup:
- 当用户释放鼠标按钮时触发。
- 适用于需要捕获鼠标释放动作的情况。
select:
- 当用户选择 <input> 元素中的文本时触发。
- 适用于文本输入字段。
paste:
- 当用户粘贴内容到 <input> 元素中时触发。
- 可以用于处理粘贴的内容。
cut:
- 当用户剪切 <input> 元素中的内容时触发。
- 可以用于处理剪切的内容。
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 中，<input> 元素支持多种事件，这些事件可以在用户与输入字段交互时触发。以下是一些常见的 <input> 事件： 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主题，由国内知名wordpress开发团队简站wordpress主题开发，它以红色为主色调，适合外贸企业出海建独立站的模板。这个主题适用于WordPress 6.0及以上版本，并且只服务于真正有需要的用户。主…...

编程日记 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不是严格意义上的并发请求工具，实际是串行的，如果需要测试后台接口并发时程序的准确性，建议采用JMeter工具。案例：JMeter设置20个并发卖票请求，查看后台是否存在超卖的情况方式一：一共10张票&…...

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

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

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

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

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

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

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

jmeter学习（6）逻辑控制器

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

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

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

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

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

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

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

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

需要补充的技能

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

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

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

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

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

element-plus 官方表格排序问题

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

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

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

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

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

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

//官网地址：零七生活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 在分布式系统中是一种代理对象（Proxy Object），它本质上是一个在本地系统中扮演远程服务角色的代理。在早期的 RPC 术语中，客户端端叫做 Stub，而服务器端的处理部分叫做 Skeleton。这种对…...

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

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

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

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

TikTok运营对IP有什么要求？

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

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

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

多模态大型语言模型（Multimodal Large Language Models， MLLM）的出现是建立在大型语言模型（Large Language Models， LLM）和大型视觉模型（Large Vision Models， LVM）领域不…...

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

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

点一下关注吧！！！非常感谢！！持续更新！！！ 目前已经更新到了： Hadoop（已更完）HDFS（已更完）MapReduce（已更完&am…...

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

sxiahdainacinwjcnisd

一、OpenAI 1.OpenAI是什么简单来说，OpenAI 大模型是由美国人工智能公司 OpenAI 开发的一系列大型语言模型（LLMs） 。你可以把它们想象成拥有巨大“知识储备”和“学习能力”的超级大脑，它们被训练用来理解和生成人类语言&#xf…...

编程新知 2026/3/31 1:05:00

黑客入侵终端设备的五种常见方式

黑客入侵终端设备的五种常见方式网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！ 黑客的攻击方式并非都是复杂繁琐的。当黑客发起网络攻击时仅为了牟利而已，并不是都需要掌握高超的技术。他们的动机大体上可以分为两种&#xff…...

编程新知 2026/3/31 0:50:48

单片机死循环设计与中断机制解析

1. 单片机程序为何需要死循环设计第一次接触单片机编程时，很多初学者都会对main()函数里那个看似"不合理"的while(1)死循环产生疑问。我当年在实验室调试第一个51单片机项目时，也曾向导师提出过同样的问题。经过这些年的项目实践，我…...

编程新知 2026/3/31 0:42:46

用Python和ROS 2 Humble手把手教你写一个简易机械臂仿真器（附完整代码）

用Python和ROS 2 Humble构建2自由度机械臂仿真器：从零实现运动学与轨迹可视化在机器人开发中，机械臂的运动控制一直是核心难点。传统实体设备的高成本和复杂调试流程让许多开发者望而却步。本文将带你用Python和ROS 2 Humble构建一个完整的2自由度机械臂…...

编程新知 2026/3/31 0:18:40

差分信号技术全景解析：从LVDS到SLVS-EC的工业与移动应用实战

1. 差分信号技术基础：为什么工业与移动设备都爱用它？ 第一次接触差分信号是在十年前调试工业PLC背板时，当时单端信号在3米长的背板上频繁出现误码，换成LVDS后问题立刻消失。这种"用两条线传输一个信号"的技术&#xff0…...

编程新知 2026/3/31 0:14:37

FoldingNet实战：用Python复现CVPR‘18点云自编码器（附PyTorch代码）

FoldingNet实战：从理论到PyTorch实现的全流程拆解在三维视觉领域，点云数据处理一直是计算机视觉研究的核心挑战之一。2018年CVPR会议上提出的FoldingNet，以其独特的"纸张折叠"思想为点云自编码器设计开辟了新路径。不同于传统方法…...

编程新知 2026/3/30 23:27:03

智能驾驶之红绿灯识别斑马线识别减速带识别 yolo数据集深度学习数据集第10625期

智能驾驶之红绿灯识别斑马线识别减速带识别 yolo第10625期 README 项目概述本数据集聚焦于智能驾驶核心道路要素的识别任务，提供高质量标注图像，专为训练和评估目标检测模型而设计。数据涵盖城市道路常见交通设施与标记，适用于自动驾驶感知…...

编程新知 2026/3/30 22:09:41

避坑指南：Jetson AGX Xavier刷机全流程（含显示器兼容性测试）

Jetson AGX Xavier刷机避坑指南：从零配置到显示器兼容性实战第一次拿到Jetson AGX Xavier开发板时，那种既兴奋又忐忑的心情至今记忆犹新。作为NVIDIA边缘计算产品线的旗舰级设备，这块开发板在机器人、自动驾驶和工业检测等领域展现出了惊人的…...

编程新知 2026/3/30 22:09:41

金三银四这波我就先上车了兄弟们，大模型（LLMs）从基础到进阶：全面解析与实战指南

本文全面解析了大模型（LLMs）的基础、进阶和微调面，涵盖了主流开源模型体系、prefix LM与causal LM的区别、涌现能力的原因、大模型LLM架构、LLMs复读机问题及其缓解方法、不同模型的选择场景、专业领域模型需求、处理长文本的方法、全参数微调…...

编程新知 2026/3/30 21:37:02

OpenClaw 的模型服务是否支持基于策略的流量控制？

关于OpenClaw模型服务是否支持基于策略的流量控制，这个问题其实触及了现代AI服务部署中一个相当核心的环节。直接说结论的话，答案是肯定的，但更值得探讨的是它具体如何实现，以及这种支持在实际场景中意味着什么。在技术架构层面&…...

编程新知 2026/3/30 21:25:00

示例代码

相关文章：