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

短命女 2022-08-28 11:54 340阅读 0赞

# 实现自动唤起键盘 #

方式一（推荐）
    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);
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关 ios移动端软键盘收起后input输入框焦点错位或无法输入解决

本文为开发中遇到的问题解决方案总结：ios移动端软键盘收起后input输入框焦点错位或无法输入解决问题描述：页面背后是可滚动的列表，前面是弹出框，里面有需要...

梦里梦外;/ 2024年04月19日 11:40/ 0 赞/ 113 阅读

相关 ios移动端input输入框常见问题解决办法

1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如

怼烎@/ 2023年07月19日 04:48/ 0 赞/ 31 阅读

相关移动端开发中android手机输入框获取焦点，软键盘弹出会遮挡表单如何解决

一、需求问题在移动端开发的表单页面当中，在`android`手机上，当点击表单页面的输入框以后，获取焦点，软键盘弹出，会覆盖住表单页面的输入框，会出现这样的问题。二、需

阳光穿透心脏的1/2处/ 2023年06月25日 10:11/ 0 赞/ 28 阅读

相关移动端输入框调取iphone手机ios端键盘fixed定位失效如何解决

一、需求问题在开发移动端项目的时候，`iphone`手机的软键盘在弹出以后，会与 `position:fixed` 冲突发生问题。当`ios`系统的手机点击输入框的时候，软

墨蓝/ 2023年06月25日 08:29/ 0 赞/ 44 阅读

相关移动端输入框获取焦点后，键盘弹出遮住内容问题

focus(name)\{ this.$nextTick(()=>\{ let dom = document.getElementById(na

深碍√TFBOYSˉ_/ 2023年01月18日 14:20/ 0 赞/ 44 阅读

相关移动端input框阻止键盘唤起

1. <input type="text" readonly /> 2. <input type="text" @focus='blur'/>

￡神魔★判官ぃ/ 2022年12月30日 03:40/ 0 赞/ 179 阅读

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

实现自动唤起键盘方式一（推荐） this.$nextTick(() => { this.$refs.input.focus() })

短命女/ 2022年08月28日 11:54/ 0 赞/ 341 阅读

相关让EditText不能自动获取焦点

原文链接：http://blog.csdn.net/subaohao/article/details/9043895 在activity中放置了1个或1个以上

亦凉/ 2022年08月23日 00:40/ 0 赞/ 221 阅读

相关 H5移动端底部input唤醒软键盘遮挡输入框解决办法

<input type="text" value="" class="tinput"/> //针对直接在浏览器打开此方法有效 $('.tin

Dear 丶/ 2022年02月01日 14:31/ 0 赞/ 704 阅读

相关 Vue中input文本输入框自动获得鼠标焦点

this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus() }) saveT

Love The Way You Lie/ 2021年07月25日 18:19/ 0 赞/ 980 阅读