uni-app input输入框 设置为confirm-type="search" focus属性无效

uni-app input输入框 设置为confirm-type=“search” focus属性无效

开发环境 版本号 项目创建方式
Mac 10.15.5 HBuilderX

示例代码：

<input focus style="width: 100%; margin-right: 5px; background: rgba(238, 238, 238, 0); margin-left: 5px; "  
type="text" confirm-type="search"  @confirm="searchNow()"  
placeholder-style="color: #999999;" placeholder="搜索内容">

<input focus  
style="width: 100%; margin-right: 5px; background: rgba(238, 238, 238, 0); margin-left: 5px; "  
type="text" confirm-type="done" v-model="ipt" @confirm="searchNow()"  
placeholder-style="color: #999999;" placeholder="搜索内容">

操作步骤：

设置为confirm-type="search" 不能自动获取焦点

<input focus style="width: 100%; margin-right: 5px; background: rgba(238, 238, 238, 0); margin-left: 5px; "  
type="text" confirm-type="search"  @confirm="searchNow()"  
placeholder-style="color: #999999;" placeholder="搜索内容">

设置为confirm-type="done" 能自动获取焦点

<input focus style="width: 100%; margin-right: 5px; background: rgba(238, 238, 238, 0); margin-left: 5px; "  
type="text" confirm-type="done"  @confirm="searchNow()"  
placeholder-style="color: #999999;" placeholder="搜索内容">

预期结果：

希望confirm-type="search" 也能弹出软键盘

实际结果：

设置confirm-type="search" 没有弹出软键盘

bug描述：

input输入框 设置为confirm-type="search" focus属性无效。confirm-type设置成其它属性正常


更多关于uni-app input输入框 设置为confirm-type="search" focus属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

同样的问题 H5端依旧提示这个

更多关于uni-app input输入框 设置为confirm-type="search" focus属性无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app平台差异问题。在iOS系统中，当confirm-type="search"时，系统会默认隐藏软键盘，需要用户主动点击输入框才会触发键盘弹出。

解决方案有两种：

  1. 使用条件渲染：通过v-if控制输入框的显示，利用组件重新渲染触发焦点
<input v-if="showInput" focus confirm-type="search" @blur="showInput = false">
  1. 使用nextTick延迟设置焦点：在页面显示后通过ref手动设置焦点
onReady() {
  this.$nextTick(() => {
    this.$refs.searchInput.focus()
  })
}
回到顶部