在 vue.js 中设置输入元素的焦点
Setting focus of an input element in vue.js
我正在尝试在 Vue.js 中设置输入元素的焦点。我在网上找到了一些帮助,但没有一个解释对我有用。
这是我的代码:
<template>
<form method="post" action="" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
<input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
</template>
<script>
export default {
data () {
return {
contacts: [],
name: null,
company: null
}
},
ready: {
// I tried the following :
this.$$.nameInput.focus();
this.$els.nameInput.focus();
// None of them worked !
}
methods: {
search: function (event) {
// ...
// I also would like to give the focus here, once the form has been submitted.
// And here also, this.$$ and this.$els doesn't work
},
}
}
</script>
我尝试this.$$.nameInput.focus();
并this.$els.nameInput.focus();
我能在网上找到什么来定位焦点,但this.$$
是不确定的,this.$els
是空的。
如果这有帮助,我正在使用 vue.js v1.0.15
谢谢你的帮助。
在 vue 2.x 中,你可以用指令来解决它。
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
然后,您可以在输入和其他元素上使用v-focus
属性:
<input v-focus>
另一种使用 Vue 2.x 和 ref
的解决方案。
您可以使用 ref/$refs
属性来定位输入并聚焦输入。
在示例中,使用了一种简单的方法,该方法可以使用提供给输入的 ref 属性来定位输入。然后访问实例上的 $refs
属性以获取对 DOM 元素的引用。
<script>
export default {
// ...
mounted: function () {
this.focusInput('nameInput');
},
methods: {
// This is the method that focuses the element
focusInput: function ( inputRef ) {
// $refs is an object that holds the DOM references to your inputs
this.$refs[inputRef].focus();
},
search: function (event) {
this.focusInput('domainInput');
},
}
}
</script>
<template>
<form method="post" action="" v-on:submit.prevent="search">
<input type="text" placeholder="Person name" required v-model="name" ref="nameInput" />
<input type="text" placeholder="Company" required v-model="company" ref="domainInput" />
<input type="submit" value="Search" class="btn show-m" />
</form>
</template>
此解决方案最适合一次性情况或可重用组件。对于更全球化的方法,该指令是要走的路。
在子元素内设置焦点
(对于那些像我一样挣扎了几个小时的人)
父母:
<template>
<div @click="$refs.theComponent.$refs.theInput.focus()">
<custom-input ref="theComponent"/>
</div>
</template>
儿童 ( CustomInput.vue
):
<template>
<input ref="theInput"/>
</template>
有几个问题。
首先,v-els 是这样定义的:
<input v-el:input-element/>
这会在代码中将变量转换为驼峰。您可以在此处阅读有关此奇怪功能的更多信息。
除此之外,您应该能够通过 this.$els.inputElement
访问变量。请注意,它只会出现在您定义该元素的组件中(或主应用程序本身,如果您在那里定义了它)。
其次,自动对焦似乎在Firefox(43.0.4)上不起作用,至少在我的机器上是这样。一切都在Chrome上运行良好,并且按预期聚焦。
使用ref
,我设法将输入集中在这样的mounted
上。
模板:
<b-form-input v-model="query" ref="searchInput" ></b-form-input>
Javascript :
mounted(){
this.$refs.searchInput.$el.focus()
}
Vue 3.x
使用自定义指令。
app.directive('focus', {
mounted(el) {
el.focus()
}
})
以下是您的使用方式:
第 1 步:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.directive('focus', {
mounted(el) { // When the bound element is inserted into the DOM...
el.focus() // Focus the element
}
})
/* Optional:
Add a slight delay if the input does not focus.
app.directive('focus', {
mounted(el) { // When the bound element is inserted into the DOM...
setTimeout(() => {
el.focus() // Focus the element
}, 500)
}
}) */
await router.isReady()
app.mount('#app')
然后在组件中:
第 2 步:
// MyInput.vue
<input v-focus>
Vue 文档
根据 vue 2.x,您还可以在组件中本地注册"指令"以获得自动对焦。
只需在组件中编写指令:
export default {
directives: { focus: {
inserted: function (el) {
el.focus()
}
}
}
}
然后在模板中,您可以在任何元素上使用新的 v-focus 属性,如下所示:
<input type="text" v-focus>
- 单击时将焦点更改为元素
- 检查元素是如何获得焦点的
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 将焦点移动到页面元素
- 如何使元素在按下按钮时不会失去焦点
- 将焦点设置为输入元素角度 js
- 遍历 DOM 以查找哪个元素具有焦点
- 如何仅在输入元素具有焦点时才启动 setInterval
- jQuery网站的键盘快捷键,焦点使用左键和右键转到上一个或下一个元素
- 如何检查焦点是否离开了一组元素
- 键盘没有在Android和BlackBerry中显示元素焦点
- 焦点和一个元素应该反映到CSS中的另一个元素
- 如何在iOS中对输入元素使用Jquery:焦点选择器
- EaselJS / canvas在拖放过程中更改元素焦点
- 使用javascript / jquery更改元素焦点(单击)上的输入/文本区域样式表
- 角度形式 - 元素焦点
- 防止元素焦点丢失(需要跨浏览器解决方案)
- 全局元素焦点监听器
- 在Angularjs中,作用域值在表单的元素焦点上重置
- 通过JS选择伪元素:焦点和:活动