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



相关推荐
少恭写代码1 天前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
Engss7 天前
Taro React-Native Android apk 打包
android·react native·taro
少恭写代码12 天前
通过duxapp提供的基础方法、UI组件、全局样式,快速编写项目
react native·移动开发·taro·duxapp
Feather_7413 天前
taro微信小程序assets静态图片不被编译成base64
微信小程序·小程序·taro
hammer101014 天前
taro底部导航,Tabbar
前端·typescript·taro
那就可爱多一点点17 天前
Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
前端·微信小程序·taro
雪球干死黄旭东19 天前
taro+taro-ui学习
学习·ui·taro
搬砖的前端22 天前
微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具
ci/cd·微信小程序·taro
Lanwarf-前端开发1 个月前
Taro 中 echarts 图表使用
前端·echarts·taro
少恭写代码1 个月前
duxui:基于Taro,兼容React Native、小程序、H5的多端UI库
react native·小程序·移动开发·taro·duxapp