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



相关推荐
大米饭消灭者12 天前
Taro是怎么实现一码多端的【底层原理】
微信小程序·taro
Dragon Wu14 天前
记一次Taro v4集成tailwindcss踩坑
javascript·小程序·taro
GISer_Jing15 天前
Taro全栈学习路线与实战指南:从基础语法到工程化、性能优化深度进阶
前端·react.js·taro
GISer_Jing15 天前
从零到架构师:Taro 全链路学习与实战指南
前端·react.js·taro
GISer_Jing21 天前
Taro多端开发
前端·react.js·taro
光影少年24 天前
前端工程化
前端·webpack·taro
GISer_Jing25 天前
Taro 5.0 深度:跨端开发的架构革新与全阶实践指南
前端·react.js·taro
GISer_Jing25 天前
Taro 5.0 小白快速上手指南:从0到1实现跨端开发
前端·react.js·taro
光影少年1 个月前
AIGC + Taro / 小程序
小程序·aigc·taro
菜鸟una1 个月前
【微信小程序+Taro 3+NutUI 3】input (nut-input) 、 textarea (nut-texteare)类型使用避坑
前端·vue.js·微信小程序·小程序·taro