Vue
自定义指令实现
Element
-
UI
输入框
的
自动
聚焦
按照官网的
Vue
自定义指令directives设置
Element
-
UI
的el-
input
输入框
获取
焦点无法生效，通过查看浏览器解析出的
Element
-
UI
的DOM树发现，
Element
-
UI
的
input
外层包裹了一层<div><div/>标签，浏览器解析如下：
根据DOM结构更改自定义指令代码如下：
directi
.
.
.
今天工作的时候，遇到了一个问题，使用
element
-
ui
中的el-
input
作为页面的
输入框
，当
输入框
失去焦点
的时候和用户按回车的时候都触发同一个更新数据的事件。（页面的列表中存在有多个el-
input
，对其中某一个进行操作）
<template>
<el-form>
<el-form-item>
<el-
.
.
.
有时使用
element
-
UI
按钮组件el-button时会出现按钮点击事件触发完成之后，按钮依然处于被点击的状态，也就是说依然表现为浅色，没有变回未点击时的颜色。
这是由于点击时点击到了按钮中的文字，或者图标，也就是按钮的子元素<span>或者<i>标签，没有办法触发父元素也就是按钮本身的点击事件
在需要的按钮点击事件中调用此方法。
// 强制按钮
失去焦点
forceBlur(e){
let target = e
.
target;
if(ta
type=＂text＂ ref="name"
name="name" autocomplete="off"
@key
.
enter
.
native="
input
Focus($event)"></el-
input
>
//在methods写
input
Focus(e){
e
.
target
.
focus();//聚焦
this
.
$refs
.
name
.
activated = true
e
.
target
.
blur(); //让
输入框
失
.
### 实现
Input
输入框
的焦点事件
对于
input
输入框
来说，可以通过 jQuery 来监听其获得焦点和
失去焦点
这两个重要的交互事件。当用户点击进入
输入框
时会触发获得焦点事件 (focus)，而当用户移开或切换到其他地方则会触发
失去焦点
事件 (blur)[^1]。
#### 使用 jQuery 处理 Focus 和 Blur 事件
为了更好地管理这些行为，在 HTML 中定义好具有特定 ID 的
input
元素是非常必要的：
```html
<
input
id="test
Input
" type="text">
接着利用 jQuery 提供的功能来编写相应的
JavaScript
代码片段如下所示：
- **获得焦点事件**
通过 `focus()` 方法可以轻松地为指定的选择器绑定获得焦点后的回调函数。每当目标元素被激活即意味着它获得了用户的注意力并准备接收数据录入操作[^2]。
```
javascript
$('#test
Input
')
.
focus(function(){
console
.
log('The
element
has received focus
.
');
- **
失去焦点
事件**
同样地，`blur()` 函数用于检测何时发生了离开当前活动状态的情况——也就是失去了光标的定位位置。这通常发生在用户完成了编辑动作之后转而去访问页面上的另一个组件之时。
```
javascript
$('#test
Input
')
.
blur(function(){
console
.
log('The
element
lost its focus
.
');
上述两段脚本展示了怎样分别捕捉这两种不同类型的
UI
变化情况，并且可以在实际项目开发过程中根据需求进一步扩展逻辑处理部分的内容。
