Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法
实现自动唤起键盘
方式一(推荐)
this.$nextTick(() => {
this.$refs.input.focus()
})
方式二
setTimeOut(()=>{
this.$refs.input.focus()
}, 500)
键盘唤起
延时时间不能过短,因为有页面重新渲染效果,延时时间过短会导致延时不在生效!
该方法在ios中不可用,因为ios为了保护安全,可能会禁止自动获取输入框focus方法
案例
<div class="right">
<div class="searchbtn" v-show="!isSearchbtn" @click="searchBtn">
<img class="searchimg" src="@/assets/images/search.png" />
</div>
<div class="search" v-show="isSearchbtn">
<input
type="text"
:placeholder="$t('Works.common.search')"
v-model.trim="submit.keyword"
autofocus
ref="searchtxt"
@keyup.enter="reloadList"
/>
<img
src="@/assets/images/search.png"
alt="search"
@click.enter="reloadList"
/>
</div>
</div>
</div>
// 搜索
searchBtn(k = true) {
this.isSearchbtn = k;
this.$nextTick(() => {
this.$refs.searchtxt.focus();
});
// setTimeout(() => {
// this.$refs.searchtxt.focus();
// }, 500);
},
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634172.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~