Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
},

以上是关于Vue中输入框自动获取焦点-移动端ios不能唤起键盘解决办法的主要内容,如果未能解决你的问题,请参考以下文章

Vue全家桶开发Android和IOS移动端应用常见问题解决

Vue全家桶开发Android和IOS移动端应用常见问题解决

手机端H5页面在input输入框获得焦点时禁止唤起键盘

移动web开发中input等输入框问题

在Vue中输入框自动获取焦点的三种方式

移动端web软键盘兼容问题