Input框实现聚焦，并解决blur事件与enter事件冲突同时触发两次问题

最新推荐文章于 2024-08-27 20:56:01 发布

im_backlit

最新推荐文章于 2024-08-27 20:56:01 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_47450691/article/details/128579084

文章介绍了如何在使用ElementUI框架时，由于el-input不支持v-focus，因此需要转换为原生的input标签并添加自定义指令来实现聚焦功能。通过创建全局v-focus指令并在插入时聚焦，同时处理enter键事件确保不会触发两次失去焦点。为了保持样式一致，可以添加ElementUI的类名。

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


<input type="text" class="el-input__inner" v-model="editParam.labelName" v-focus :placeholder="scope.row.labelName" @blur="submitEdit" @keyup.enter="$event.target.blur()" @focus="keysFlag = false">

//设置v-focus指令，如该需求很多地方用到，你可以设置全局指令
directives: {
	focus: {
		inserted: (el) => {
			el.focus()
		}
	}
}

该项目用的是element ui的框架，el-input不支持，所以要换成原生的input标签，如果你需要和他的样式一样，添加上对应的class名即可。同时按下enter事件触发的是失去焦点事件，所以不会触发两次。