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

短命女 2022-08-28 11:54 311阅读 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 条评论，311人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关移动端输入框，苹果手机无法输入，部分安卓手机获取焦点自动清空数据问题

1.苹果手机无法输入问题，解决办法：将 \\{ -webkit-user-select: none; -moz-user-select: none; u

╰半橙微兮°/ 2023年01月03日 14:26/ 0 赞/ 146 阅读

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

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

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

相关 vue通过自定义指令使input输入框自动获取焦点

在部分开发场景中我们需要input输入框自动获取焦点我们可以通过以下代码实现使用自定义指令 v-focus <template> <el

我就是我/ 2022年08月28日 12:44/ 0 赞/ 196 阅读

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

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

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

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

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

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

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

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

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

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

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

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