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

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关移动端手机软键盘遮挡输入框问题

页面: <section class="links"> <h3 class="title">联系方式</h3> <div class=

今天药忘吃喽~/ 2022年05月29日 11:52/ 0 赞/ 229 阅读

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

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

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

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

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

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

相关 IOS 解决键盘挡住输入框的问题

在iOS开发发现一个问题，有时输入框位于低出时，当编辑输入时，弹出的键盘会挡住输入框，令用户看不清楚实时的输入情况,使界面交互极度不友好。经过查资料终于解决了这个问题...

客官°小女子只卖身不卖艺/ 2021年06月07日 02:06/ 0 赞/ 497 阅读