input标签事件总结（vue、H5），获取焦点失去焦点实时监听事件

已于 2022-01-22 11:49:56 修改
阅读量3.8w 收藏 44
点赞数 6
CC 4.0 BY-SA版权
文章标签： html5 javascript vue.js html
于 2021-07-31 20:20:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/start_sea/article/details/119280655
本文总结了HTML中的input标签事件，包括onfocus、onblur、onchange、oninput等，并详细介绍了在Vue中如何使用v-on:input进行实时监听，以及@focus和@blur处理焦点变化。提供了标签内写法和JavaScript绑定事件的示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

input标签事件总结（vue、H5）

一、在Html中input标签的相关事件写法：

1、onfocus（常用）
input标签获取焦点事件

2、onblur（常用）
input失去焦点事件（触发条件：先获取焦点，再失去焦点触发）

3、onchange
input失去焦点并且它的value值发生变化时触发

4、oninput
input框输入过程中value值改变时实时触发，及没输入一个字符都会触发

5、onclick
input标签type="button"时的点击事件

6、onkeydown
input框输入时键盘按钮按下事件

7、onkeyup
input框输入时键盘按钮抬起事件，触发onkeyup事件之前一定触发onkeydown事件

8、onselect
input标签内容选中时触发事件

写法：
1、标签内写法：

在这里插入图片描述
2、js绑

最低0.47元/天 解锁文章
start_sea
关注
html5响应键盘事件,vue监听键盘事件的相关总结
weixin_29323273的博客
06-05 752
这篇文章主要介绍了vue监听键盘事件的相关总结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下按键修饰符在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码...
h5事件监听
qq_36545656的博客
08-27 2507
问题：点击div(或弹框)外的任何区域div(或弹框)消失 前情提要： 项目是用angular写的移动端页面，测试反馈点击确认按钮每次都要点击2次才生效，体验很不好，需要优化。页面如下图所示：点击金额输入框键盘出现输入金额，键盘是单独封装的组件，点击页面其他地方键盘消失。 定位问题： 当测试跟我说的时候，我第一反应是是不是点击有延迟啊，然后我亲自测了一遍，发现有键盘出现的时候需要点2次...
input框激活时展示div，失去焦点时隐藏
菲律宾铁猴子的博客
05-17 1178
Vue输入框的on-focus与on-blur事件 on-focus：输入框聚焦时触发 on-blur:输入框失去焦点时触发 v-show:切换元素的显示状态，true为显示，false为隐藏 根据文章需求，我们应该在input框中绑定上述的on-focus和on-blur，设置需要被控制的div的v-show，控制显示与隐藏，具体代码如下： input框 <Input @on-focus="showDictory" @on-blur="hideDictory" /> 方法 showDicto
文本框失去焦点问题
05-30
文本框焦点问题解答，没有基础的看着费劲 TextBox组件[2]（文本框组件）是一种常用的，也是比较容易掌握的组件。应用程序主要使用它来接收使用者于输入文字信息。 当我们使用Visual Basic .Net集成开发环境开发应用程序时，在从【工具箱】的【Windows窗体】选项卡中向Form1的设计窗体拖入一个TextBox组件的后，我们可能并没有感觉到即使是这样一个简单的操作，Visual Basic .Net都做了很多幕后工作。主要工作和步骤如下： 1. 首先实例化System.Windows.Forms.TextBox类，并根据拖动到窗体的位置和形状分别设定TextBox实例的各个属性。 2. 我们看到的设计窗体，其实是Form1类的一个实例，而Form1类首先是从System.Windows.Forms.Form类继承而来，Form1类中的成员根据使用者往窗体中拖入的组件不同而不同。各个成员通过Add或AddRange方法加入到Form1中，这样拖入的组件才能够显示在设计窗体上。
JavaScript【6】事件
最新发布
Stringzhua的博客
05-18 1166
JavaScript 中的事件是浏览器与代码交互的机制，用于响应用户操作或页面状态变化。本文重点介绍了表单事件的处理方式，包括获取/失去焦点（onfocus/onblur）、节点内容改变（onchange）、输入框内容输入（oninput）、选取元素（onselect）以及表单提交（onsubmit）。通过示例代码展示了如何为这些事件绑定处理函数，并演示了事件触发时的具体行为。例如，输入框在获得焦点时背景变为红色，失去焦点时变为绿色；输入内容时实时打印到控制台；表单提交时根据返回值决定是否阻止提交。这些事件
Input输入框 @blur / @focus 获取 / 失去焦点事件
weixin_57422253的博客
10-19 1764
Input输入框获取/失去焦点时触发@focus / @blur 事件。
input框的失去焦点事件onblur与下拉框的点击事件click冲突
qq_52937529的博客
02-28 1533
input框的失去焦点事件与列表的click事件冲突，导致未触发click事件
input聚焦，失去焦点的那些事
weixin_42934142的博客
12-11 1251
input聚焦，失去焦点对事件处理的影响及解决办法
input失去焦点和获得焦点jquery焦点事件
superman166的专栏
06-24 1162
input失去焦点和获得焦点jquery焦点事件插件， 鼠标在搜索框中点击的时候里面的文字就消失了。 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就一劳永逸，遇到类似情况就来调用一下就OK 了 相关js代码: 1 2 3 4 input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站 5 6 7 $
vue2中input失去焦点事件
07-28
- *2* *3* [input标签事件总结（vue、H5），获取焦点失去焦点实时监听事件](https://blog.csdn.net/start_sea/article/details/119280655)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra...
H5: div与textarea输入框的交互（聚焦、失去焦点、键盘收起）
干饭搬砖两不误。
08-17 3003
div 与 textarea 输入框交互的聚焦、失去焦点、键盘收起、表情插入不失去焦点的需求实现
el-input输入框添加失去焦点事件
vue+iview 动态渲染表格（vue.js结合iview插件）
06-21 1285
【代码】el-input输入框添加失去焦点事件。
js 给input元素添加失去焦点事件
Rockandrollman的博客
08-10 4733
是一个示例 id，您需要将其替换为实际的 input 元素的 id，或者使用其他适当的方式来选择要添加事件的 input 元素。方法将失去焦点事件绑定到该元素上。在事件处理函数中，您可以编写处理逻辑，以响应 input 元素失去焦点时的操作。此外，您还可以使用类似的方法来绑定其他事件（如键盘事件、鼠标事件等），以根据需要执行相应的操作。要给一个 input 元素添加失去焦点（blur）事件，您可以使用 JavaScript 的。获取到具有指定 id 的 input 元素。在上述代码中，首先通过。
关于input的焦点事件
liudanyang_21的博客
08-31 3049
关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_integral").blur(function(){ //失去焦点//失去焦点后触发的事件}; //实时获取值时 需在input上接上这个函数，例： <input type="text" value="8000" oninput="scanf_integral (event)" onpropertychange="scanf_in.
html 输入框 焦点事件,input输入框用jquery怎么写失去焦点事件
weixin_35717251的博客
06-04 2488
input输入框用jquery失去焦点事件的方法：首先设置input的id属性为testid；然后使用【ready()】方法在页面加载完成时，执行function函数；最后使用【blur()】方法给input对象绑定失去焦点事件。本教程操作环境：windows7系统、jquery3.2.1版本，Dell G3电脑。input输入框用jquery失去焦点事件的方法：1、新建一个html文件，命名为t...
input失去焦点，获取焦点等的几个事件
zhiyuya的博客
08-01 1188
$(document).ready(function(){ //获取焦点事件 $("input").focus(function(){ }); //失去焦点事件 $("input").blur(function(){ }); //实时搜索 $('input').bind('input porpertychange',function(){ co..
JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
热门推荐
QiuRenBB的博客
09-07 1万+
前言：   在开发的过程中，我们经常会有搜索的需求，其中就涉及到的知识点就包括了今天我们要说的两个重要“角色”，input框和展示列表的li。 需求：   当我们在input框中输入内容时，展示列表能够渲染出模糊查找到对应的内容。这时，当input框失去焦点的时候，我要让展示列表隐藏或消失，而且我还想点击对应的展示列表中的li时，能够将对应li的值赋值给input。 问题：   那么问题来了，当我点击li的时候，也就意味着input失去了焦点，我还没有选中并拿到li中的值给input，展示列表就先一步隐藏或
点击浏览器搜索栏，＜input/＞输入框失去焦点
weixin_42157753的博客
08-30 966
监听浏览器点失去焦点事件
Web前端篇——el-input失去焦点事件监听
u011391361的博客
01-10 2291
el-input失去焦点事件监听
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值