H5页面弹出的弹框中,密码输入框调手机安全键盘,需要二次点击才会把弹框顶上去,怎么解决?

H5页面弹出的弹框中,密码输入框调手机安全键盘,需要二次点击才会把弹框顶上去,怎么解决?

场景是:页面点击确定按钮后弹出一个弹框,弹框里密码输入框自动获取焦点并调起手机安全键盘,但此时,手机键盘并不会把弹框顶上去,会遮挡部分弹框,当键盘收回时,此时密码输入框光标一直在的,再次点击密码框,键盘弹出,并把弹框顶上去;如果把输入框的type换成除password以外的任意一种类型,就不会出现以上情况,但是调起的不是手机安全键盘,业务需求又必须要手机安全键盘,请问大家有什么好的解决办法吗???


回答:

可以从两个方面考虑:

  1. 就是隐藏一个dom,高度是和安全键盘大致一样的,用来顶起弹窗
  2. 不自动获取焦点,让用户主动操作

补充:
造成这个原因更多是因为弹窗用了绝对定位,脱离了文档流,所以不受页面的高度影响了,如果是安全键盘弹起的时候,让弹窗距离顶部的位置做调整(或者固定距离顶部的位置),而不是让软键盘撑开呢,这样可不可行呢

以上是 H5页面弹出的弹框中,密码输入框调手机安全键盘,需要二次点击才会把弹框顶上去,怎么解决? 的全部内容, 来源链接: utcz.com/p/935960.html

回到顶部