taro h5 ios解决input不能自动获取焦点拉起键盘

描述:页面中有个按钮,点击跳转到第二个页面(有input),能直接获取焦点拉起键盘输入

安卓:

直接用focus()

ios:

focus无效,必须手动拉起

原理:

点击按钮的时候拉起一个此页面隐藏的input或者全局隐藏的input拉起键盘, 跳转后通过setSelectionRange 去设置光标

步骤一:定一个全局的隐藏input,并挂到window上
步骤二:第一个页面点击按钮,调起全局input, 然后跳转
步骤三:在第二个页面去设置页面中的input光标


这里的坑:

1)querySelector 是获取的页面第一个指定dom

  1. 必须用settimeout, 否则键盘能拉起,但是光标不在input中,不能直接输入

3)这里的input是原生的,可以直接获取到,如果用第三方ui, 比如taroui中的 AtSearchBar ,必须用最里面的input, 不能用AtSearchBar 上其他的dom, 并且要放到settimeout中, 否则为null



相关推荐
GISer_Jing5 小时前
Taro跨端开发实战:核心原理与关键差异解析
前端·javascript·taro
GISer_Jing2 天前
深入拆解Taro框架多端适配原理
前端·javascript·taro
静待雨落5 天前
如何在Taro项目中使用axios
微信小程序·taro
GISer_Jing5 天前
Taro+React跨端开发实战指南
react.js·arcgis·taro
玉木成琳6 天前
Taro + React + @nutui/nutui-react-taro 时间选择器重写
前端·react.js·taro
Danny_FD7 天前
使用Taro实现微信小程序仪表盘:使用canvas实现仪表盘(有仪表盘背景,也可以用于Web等)
前端·taro·canvas
具***711 天前
探索谷歌最新时间序列预测模型 TSMixer
taro
一只一只妖15 天前
Taro+Vue3+TS+Vite 小程序开发底座搭建流程
vue.js·小程序·taro
Light6020 天前
用一个 Vue 中间件统一 UniApp 与 Taro:契约驱动的双栈方案
vue.js·uni-app·uniapp·taro·vue中间件·跨端适配·契约驱动
禁止摆烂_才浅25 天前
Taro 小程序页面返回传参完整示例
react.js·微信小程序·taro