1 autofocus 第一次加载页面自动获取焦点
<input
type="text"
placeholder="请输入标题,不超过三个字符"
class="list-input"
autofocus
/>
2 点击div(addtitle)或其他组件,控制v-if或v-model显示input(list-input)并获取焦点,失去焦点时判断字符数,
<div class="addtitle" @click="addtitle"><!--点击事件-->
<div class="title-list-body">
<!--失去焦点@blur-->
<input
ref="titleinput"
type="text"
placeholder="请输入标题,不超过三个字符"
class="list-input"
@blur="panduan"
v-model="newtitle"
/>
</div>
</div>
<script>
export default {
data() {
return {
newtitle: "",
};
},
methods: {
//获取焦点
addtitle() {
//此时autofocus不生效的原因是:
// **auto在第一次加载页面时生效,此时input不显示**
//解决方法:给text一个ref,页面渲染完成后才能获取焦点
this.$nextTick(function () {
this.$refs.titleinput.focus();
});
},
// 失去焦点判断字符数
panduan() {
if (this.newtitle.length > 3) {
alert("字符不能超过三个!");
this.newtitle = "";
}
},
},
};
</script>