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



相关推荐
aiguangyuan5 天前
Taro 开发快速入门手册
taro·前端开发·移动端开发
aiguangyuan7 天前
Taro多端适配技术解析
taro·前端开发·移动端开发
Airser8 天前
npm启动Taro框架报错
前端·npm·taro
Dragon Wu12 天前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
菜鸟una16 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
GISer_Jing1 个月前
AI/CICD/Next/React Native&Taro内容
人工智能·react native·taro
GISer_Jing1 个月前
大前端——Taro、React-Native、Electron 大前端
前端·javascript·electron·taro
Thetimezipsby2 个月前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
gitboyzcf2 个月前
基于Taro4最新版微信小程序、H5的多端开发简单模板
前端·vue.js·taro
浩星2 个月前
react+taro中使用vant 工具:taroify
前端·react.js·taro