为什么当我点击input (Vue)时焦点不起作用？
为什么当我点击input (Vue)时焦点不起作用？
提问于 2021-04-26 19:55:23
我有一个问题，当我想要专注于一些输入时，我必须点击两次，并且我不知道如何在输入的末尾设置光标。我试过使用$refs，但有一些更深层次的问题。有什么建议吗？
HTML代码
<div class="input-container">
<h3 class="field-value" v-show="!showField('name')" @click="focusField('name')">{{ user.name }}</h3>
<input v-model="user.name" v-show="showField('name')" id="user-name" type="text" ref="test" class="field-value form-control" @focus="focusField('name')" @blur="blurField">
</div>
<div class="input-container">
<h3 class="field-value" v-show="!showField('email')" @click="focusField('email')">{{ user.email }}</h3>
<textarea name="testing" id="editableTextArea" cols="30" rows="10" v-model="user.email" v-show="showField('email')" type="email" class="field-value form-control" @focus="focusField('email')" @blur="blurField"></textarea>
</div>VUE代码
data() {
return {
user: {
name: pa.data.text1,
email: pa.data.text2
},
editField: '',
}
},
methods: {
hi(){
this.$refs.test.$el.focus();
console.log(1);
},
focusField(name) {
this.editField = name;
},
blurField() {
this.editField = '';
},
showField(name) {
return (this.user[name] == '' || this.editField == name)
},
}Stack Overflow用户
回答已采纳
发布于 2021-04-26 22:57:02
您可以使用setTimeout来应用焦点，不推荐这样做，但您可以使用它，因为您在这里有一些特定的用例。
以下是所需的更改
focusField(name) {
this.editField = name;
setTimeout(()=>{
this.$refs[name].focus(); // access the ref and make it focus after a delay make sure element appear in the DOM
},200);
},当你移动到任何其他blur会自动调用的元素时，你还需要改变一些来自输入的方法绑定，比如blur。
还要声明inputs元素的所有ref。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67266174
复制相关文章
相似问题
腾讯云开发者
