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

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

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

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

一脸悲伤

火狐手机模式下截图（设计图中输入框位于手机屏幕下半屏，如下图）

图1：未点击前

图2：点击后

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

图3：点击后（这张是这篇文章的重点，问题所在）

图4：输入内容后

解决思路：哈哈哈哈，留坑，解决了才有得写嘛。

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

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

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

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

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

HTML结构

收银台首页-非首次支付用户

收银台首页-首次支付用户

选择支付方式

选择银行或添加新的银行卡

输入验证码