Vue自定义事件打开网页input自动聚焦

最新推荐文章于 2024-04-02 09:25:22 发布
最新推荐文章于 2024-04-02 09:25:22 发布
阅读量816 收藏
点赞数

全局定义一个自定义事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
	<input v-focus/>
</div>
<script>
Vue.directive('focus',{
	inserted:function(el){
		el.focus()
	}
})
new Vue({
  el: '#demo'
})
</script>
</body>
</html>

局部定义一个自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
	<input v-focus/>
</div>
<script>
new Vue({
  el:'#demo',
  directives:{
  	focus:{
		inserted(el){
			el.focus()
		}
	}
  }
})
</script>
</body>
</html>
柠檬布丁^O^
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2.x Todo之自定义指令实现自动聚焦的方法
10-17
比如在Todo项目中，用户双击待办事项后进入编辑状态，此时我们期望编辑框能够自动聚焦以便用户可以立即输入内容。本文将介绍如何使用Vue的自定义指令来实现这一功能。 首先，我们需要了解Vue中的自定义指令的概念。...
全局注册输入框自动获取焦点
qq_51441779的博客
11-22 342
// 全局注册输入框自动获取焦点 Vue.directive("fofo", { inserted(el) { // 指令所在标签, 被插入到真实DOM触发一次(仅触发一次) fofo(el); }, update(el) { // 指令所在标签被更新时触发 fofo(el); } }); function fofo(el) { if (el.nodeName === "INPUT" || el.nodeName === "TEXTAREA") {
vue使用快捷键（F1-F12），聚焦el-input框并选中文本
weixin_55472979的博客
09-14 1617
vue使用快捷键（F1-F12），聚焦el-input框并选中文本
Vue 实现输入框的聚焦
热门推荐
Mr.小灰狼_随笔
04-19 1万+
Vue 实现输入框的聚焦 目录 方法一、绑定 ref 方法二、使用自定义指令——官网 方法三、通过事件中的事件对象 $event，找到 input 方法四、使用原生
vue之输入框聚焦
_JS的博客
04-03 818
当打开一个表单，要聚焦输入框，用vue如何实现。
input框聚焦和失去焦点以及vue的自定义指令（以input框聚焦为例）
qq_41445106的博客
10-11 2768
<input type="text" id="username"> 聚焦： document.getElementById('username').focus() 失去焦点： document.getElementById('username').blur(); vue自定义事件：指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀 情形1:全局自...
vue 自定义指令自动获取文本框焦点的方法
10-18
总结来说，Vue自定义指令`v-focus`提供了一种灵活的方式，让我们能根据需求自定义文本框或组件的行为，比如自动聚焦。通过理解Vue的生命周期钩子和DOM操作，我们可以有效地实现这种功能，并解决在不同场景下可能出现...
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
10-18
首先，vue-auto-focus是一个专门用于Vue的自定义指令，通过它可以方便地控制Vue实例中input或textarea元素的聚焦行为。在使用时，只需在需要自动聚焦的元素上添加v-auto-focus指令，并通过绑定一个控制聚焦行为的...
vue自定义指令合集 vue2.0版本
12-17
一个常见的自定义指令示例是创建一个聚焦输入框的指令： ```javascript Vue.directive('focus', { inserted: function (el) { el.focus() } }) // 使用 <input v-focus /> ``` 当这个输入框被插入到DOM时，它将...
Vue自定义指令介绍(2)
11-26
例如，下面的代码演示了一个简单的自定义指令`v-focus`，使得元素在页面加载时自动获取焦点： ```html <!DOCTYPE html> <script src="https://unpkg.com/vue/dist/vue.js"> <input v-focus> // 注册...
Vue设置输入框input的焦点focus
superatom01的博客
05-13 7532
实际上，在我测试的一个列表的的应用里（列表每个元素有一个编辑框），这个$el也是个undefined，仍然不行。也就是从$refs里面拿出来这个组件后，它的第0个元素，才是input的真身。如果你试了上面的方法都不行的时候，别气馁，下面的方法也许能让你出坑。如果要实现页面加载后，立即让编辑框获得焦点并进入编辑状态，请移步。通常，你搜到的很多答案都说通过。你可能会遇到这个脚本错误的信息。
vue INPUT输入框始终聚焦的方法
heirui的专栏
04-06 1784
今天有个需求，弹出一个窗口，窗口里只有一个INPUT，要求始终聚焦在窗口中的输入框中，不管用户点哪里，都无法改变焦点，除非关闭这个弹窗。重点在setTimeout上，一般我们习惯用$nextTick，但很可惜，这在firefox中行不通，只在chrome中能正常锁定焦点。
input输入框的自动聚焦问题——从隐藏到显示
ninerwsx的博客
08-05 3841
input输入框的自动聚焦问题——从隐藏到显示
vue input聚焦事件操作
约妲己吃火锅的博客
12-24 6877
当鼠标在input中聚焦时提示消失 vue对聚焦foucs不能用 ：focus=“foucs” 绑定属性，我试了不能触发foucs聚焦事件，后面改成 @focus=“foucs” 绑定事件才能触发 <el-input @focus="foucs" type="text" v-model="search" placeholder="请输入您现在所在的位置"/> data () ...
vue3自定义指令
m0_68716504的博客
01-15 1445
/ 在模板中启用 v-focusmounted: (el) => el.focus() //使input自动聚焦//el.querySelector('input').focus() //使el-input自动聚焦在main.js中进行全局挂载// 使 v-focus 在所有组件中都可用mounted: (el) => el.querySelector('input').focus() //使el-input自动聚焦 所有页面都可使用 v-focus使用。
vue3 实现 input 输入框聚焦
最新发布
小废物
04-02 1098
在 template 标签内写入 input 输入框。在 script 标签内。
vue中input输入框常用事件的使用
estrusKing的博客
12-14 1万+
文章目录@input（或者是v-on:input）@blur（失焦）@focus（聚焦）@change（改变）@click （点击）@dblclick（双击）@keydown（当键盘按下）@keyup.enter（当按下回车键） @input（或者是v-on:input） 输入框里面内容发生改变（且不用失去焦点）时触发 跟随输入框输入内容实时变更数据 适用于实时查询，每输入一个字符都会触发该事件 @blur（失焦） 输入框失去焦点时触发 输入框在输入完成、移到其他地方时进行验证时，需要用到该事件，用此事件进
Vue中input自动聚焦
前端如逆水行舟...
09-07 4992
举例：鼠标点击span标签时，span标签消失，同时input显示，并且，input在此已经获取到了焦点 分析：当需要浏览器重绘重排的时候，是需要时间的，当点击span标签时Input还没有渲染出来，此时如果在点击span的方法里直接写focus()，可以发现是不起作用的，input没有何来焦点？
vue Antd 输入框Input自动聚焦
queen_css的博客
12-28 6791
1、从vue的实例属性$ref去调input的focus方法使其实现聚焦。 <a-input type="text ref="ainput" /> <button @click="handleChange"></button> 2、点击button自动聚焦，或其他事件需要聚焦 methods:{ handleChange(){ this.$nextTick(()=>{ this.handleInputFo
Vue自定义render封装：简化项目弹框管理
本文聚焦于如何通过Vue自定义render统一管理项目组中的弹框功能，以解决传统方式中存在的问题，如代码冗余、配置复杂、样式不一致以及参数传递不便等。 首先，文章讨论了为什么需要对弹框进行封装。在项目中，弹框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值