webapp输入框自动获取光标被软键盘遮挡

一个啰嗦的人写一件啰嗦的事,仅记录项目中的点滴,督促自己思考总结。可能并不能帮助大家找到什么方法方式,如能帮助请留言,我贴粗来哈。

项目背景:联通某B2B交易平台webapp收银台添加银行卡

需求要点:收银台页面新增银行卡需输入户名、卡号,点击【添加新的银行卡】触发3个事件:本行自动置顶、同时展开两行输入框【户名、卡号】、并且户名输入框获得光标。

实现过程以及问题:在手机打开html页面操作,点击【添加新的银行卡】触发点击事件,执行需求要点事件,软键盘自动弹出后输入框被遮挡,当输入内容后输入框才能自动置顶到屏幕上方,传说中的盲输,在IOS中不会出现,安卓会出现。具体现象看图3、图4。

一脸悲伤


火狐手机模式下截图(设计图中输入框位于手机屏幕下半屏,如下图)


webapp输入框自动获取光标被软键盘遮挡_第1张图片
图1:未点击前


webapp输入框自动获取光标被软键盘遮挡_第2张图片
图2:点击后

安卓7.1.1 锤子坚果Pro 微信下截图(触发点击事件,输入框获得光标但依然被软键盘遮挡,如下)


webapp输入框自动获取光标被软键盘遮挡_第3张图片
图3:点击后(这张是这篇文章的重点,问题所在)


webapp输入框自动获取光标被软键盘遮挡_第4张图片
图4:输入内容后

解决思路:哈哈哈哈,留坑,解决了才有得写嘛。

写写这个需求的坑,吐槽吐槽,下面

设计中:要求收银台与金额置顶展示,输入内容和操作全部位于下半屏。

“页面”分别是:【收银台-非首次支付用户】【收银台-首次支付用户】【选择支付方式】【选择银行卡以及添加银行卡】【输入验证码】以及【绑定渠道】。

“页面”的转场方式:为了实现和手机APP的转场方式:能从右像做滑动出现,返回从左向右滑动消失。所有“页面”在一个HTML里,使用jquery实现类似手机的转场方式。

选择银行卡和选择支付操作不一致:支付方式点击后自动选择相应选项并返回收银台首页,选择银行卡为了在同一页面操作添加新银行卡,硬塞了个确定按钮,选择后必须点击确定按钮后在返回收银台首页。


webapp输入框自动获取光标被软键盘遮挡_第5张图片
HTML结构


webapp输入框自动获取光标被软键盘遮挡_第6张图片
收银台首页-非首次支付用户


webapp输入框自动获取光标被软键盘遮挡_第7张图片
收银台首页-首次支付用户
webapp输入框自动获取光标被软键盘遮挡_第8张图片
选择支付方式

webapp输入框自动获取光标被软键盘遮挡_第9张图片
选择银行或添加新的银行卡



webapp输入框自动获取光标被软键盘遮挡_第10张图片
输入验证码

你可能感兴趣的:(webapp输入框自动获取光标被软键盘遮挡)