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



相关推荐
S***q1921 天前
JavaScriptWebSocket案例
51单片机·3dsmax·taro
凹润之之之4 天前
使用canvas处理图片,实现放大缩小增加标注功能
taro·canvas
aiguangyuan19 天前
Taro 开发快速入门手册
taro·前端开发·移动端开发
aiguangyuan21 天前
Taro多端适配技术解析
taro·前端开发·移动端开发
Airser22 天前
npm启动Taro框架报错
前端·npm·taro
Dragon Wu1 个月前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
菜鸟una1 个月前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
GISer_Jing1 个月前
AI/CICD/Next/React Native&Taro内容
人工智能·react native·taro
GISer_Jing2 个月前
大前端——Taro、React-Native、Electron 大前端
前端·javascript·electron·taro
Thetimezipsby3 个月前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro