# 使用 jQuery 实现 blur 和 focus 事件
在前端开发中，`focus` 和 `blur` 事件是非常重要的，它们用于处理用户在输入框中的交互行为。今天，我们将一起学习如何使用 jQuery 来实现这两个事件。
## 流程概述
为了实现这些事件，下面是一份简单的流程表，帮助你理解整个过程：
| 步骤 | 描述
获取焦点事件 focus获取 焦点时 触发的事件程序每次 获取焦点 都会触发失去焦点事件 blur失去 焦点是 触发的事件
原创
2022-12-21 10:12:38
313阅读
在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到订单号输入框->订单号扫描完毕聚焦到商品条码输入框->扫描完一个商品条码后依然停留在条码输入框->所有条码扫描完毕聚焦到订单号输入框。为了应付这种需求，就做了这个指令，github地址：vue-auto-f
转载
2024-06-26 23:36:50
64阅读
<1> <pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
转载
2017-05-16 18:44:00
235阅读
2评论
前言本文直接参考vue2.0官方文档， 并演示博主项目中的使用自定义指令 directive除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子：当页面加载时，该元素将获得焦点 (注意：a
转载
2024-04-29 20:15:10
322阅读
事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件...
原创
2022-07-03 00:42:08
1669阅读
onfocus:获取焦点,点击时，按着不放 onclick:点击松开之后，未点击其他处 onblur:点击松开之后，又点击其他处 display:block,none,inline block：单独占据一行，与前后不在同一行 block：块对象的默认值。对象之后添加新行。 none：隐藏对象。隐藏的对象不占据物理空间。 inline：内联对象的默认值。对象后不添加行。 displa...
转载
2016-11-14 10:55:00
140阅读
2评论
问题再现：
我们遇到以下的问题，就是在ext-js的一个combo控件上选择并点击一个menu item,会弹出一个对话框，如果不选择对话框的时候，焦点始终在原来的combo控件上，而不会定位到弹出对话框中的输入文本框中。
如图：
当我们在这个combobox中选择upgrade时候，会弹出一个输入密码对话框：
这时候，如果不点击"Password Check
原创
2012-09-13 13:42:52
5973阅读
js<script type = "text/javascript">$(function () { $("input[type=text], input[type=password], textarea, select").each(function () { $(this).addClass("blur"); $(this).focus(function () { $(this).removeClass("blur").addClass("focus"
原创
2021-06-02 13:54:44
103阅读
js<script type = "text/javascript">$(function () { $("input[type=text], input[type=password], textarea, select").each(function () { $(this).addClass("blur"); $(this).focus(function () { $(this).removeClass("blur").addClass("focus"
原创
2021-06-02 13:54:44
211阅读
什么是事件代理（Event Delegation）？如果不太了解的朋友，可详细阅读：《Event delegation in JavaScript》，这里不再累述。首先让我们一起来回顾一些常识：通常支持事件冒泡（Event Bubbling）的事件类型为鼠标事件和键盘事件，
转载
2013-03-16 23:08:00
322阅读
2评论
Miller同学发现的IE6 bug：如以下代码，点击textarea时，引发window的blur，导致focus与blur配对混乱：
<body> <textarea></textarea> hello<script> window.onblur=function(){
document.title= 'blur:' + Math.random() ;
}
window.onfocus=function(){
document.title= 'focus:' + Math.random() ;
}</script> </body>
转载
精选
2011-08-01 02:55:58
4557阅读
自定义指令1.效果实现定义全局指令:v-focus ==> document.getElementById(‘search’).focus()// 定义全局的指令 v-focus
Vue.directive("focus",{
bind:function(el){
},
inserted:function(el){
el.focus()
}
转载
2024-10-21 13:42:37
49阅读
ssao的blur遇到个麻烦
花了两三天时间。。。终于大概知道原因了。
在nvidia的ssao（http://developer.download.nvidia.com/SDK/10.5/direct3d/Source/ScreenSpaceAO/doc/ScreenSpaceAO.pdf）中 用到了
cross bilateral filter这种blur这个比那种downsample的bl
转载
2014-09-03 17:53:00
172阅读
2评论
目录input事件示例input框的几种类型示例input事件click 点击事件，一般不会用于input输入框，会用于按钮，用于输入框就有点像focus了，当点击输入框时会触发
blur 失去焦点事件，当失去焦点时会触发。
focus 获取焦点事件，当获得焦点时会触发。
input 在输入框中每输入一个字符都会触发一次
change 当输入框内容改变了，且
转载
2023-06-07 22:02:08
662阅读
Vue 自定义指令在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全
转载
2024-09-12 12:16:15
177阅读
DIV和其他普通标签是不具有onfocus和onblur事件的。INPUT和A标签为什么拥有？而DIV和SPAN等普通标签却没有？有时候我们习惯性用键盘的TAB来移动光标，仔细看你会发现，光标只在INPUT和A上跳转。因为INPUT和A标签具备TAB属性。我们只需要给DIV或者SPAN等普通标签创建
转载
2018-11-08 15:54:00
946阅读
# JavaScript onblur事件详解
在Web开发中，用户交互是一个重要的方面。为了提升用户体验，开发者常常需要通过JavaScript监控用户在输入框中的行为。`onblur`事件正是实现这一需求的工具之一。本文将简要介绍`onblur`事件的定义、用法，以及在实际开发中可能用到的代码示例。
## 什么是onblur事件？
`onblur`事件是在HTML元素失去焦点时触发的事件
# 如何实现 "jQuery on blur"
## 概述
本文将教会你如何使用 jQuery 实现 "on blur" 事件。"on blur" 事件在元素失去焦点时触发，通常用于验证用户输入或执行其他操作。
## 步骤
下面的表格展示了实现 "jQuery on blur" 的步骤和相应的代码。
| 步骤 | 描述 | 代码 |
|---|---|---|
| 1 | 引入 jQuery
原创
2023-07-20 16:42:30
185阅读
<input onfocus="this.blur();" type="text" style="border:0px;" id="ry_xm" value="" readonly="readonly&quo
原创
2011-03-14 09:54:31
215阅读
