手机网页中输入框被输入法遮挡问题
来源:互联网 发布:淘宝网狗宠物店 编辑:程序博客网 时间:2024/04/29 10:44
之前要做一个弹出对话框,填写信息,发现在手机上看的时候,较后的输入框在填写信息时,输入框被输入法遮挡,只能盲填。
前提
1.弹出的对话框用display:fixed定位的
2.对话框大小固定
解决办法
css部分
(dlg-top与dlg-bottom为对话框的类,用于确定对话框的定位方式)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js部分
“deliver-dlg”为对话框的类
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
思路解析
简单点说就是改变对话框的定位方式,在默认情况下用top,在有输入法的时候,根据情况用bottom。
在input获取焦点且窗口重设的时候(即输入框弹出),注意先绑定input的focus事件,再绑定窗口改变的事件,因为在手机上,是input获取焦点,输入框才弹出导致窗口大小改变。
再窗口大小改变事件发生之后,判断输入框是否被遮(即不在窗口的可视范围内),采用的办法是用可视窗口的高度($(window).height())是否大于输入框的底部(input.offset().top+input.offset().height-document.body.scrollTop)因为input.offset().top表示的是元素离文档头部的位置,要算元素离可视窗口头部的位置,可以再减去滚动条滚动了多少。以上是判断元素是否在可视窗口底部。
阅读全文
0 0
- 手机网页中输入框被输入法遮挡问题
- 手机网页中输入框被输入法遮挡问题
- Android webview网页里输入框被输入法遮挡问题
- Android webview网页里输入框被输入法遮挡问题
- 手机端网页:安卓手机输入法遮挡输入框问题
- 手机输入法遮挡输入框解决方法
- 5、手机输入法遮挡输入框解决方法
- PopupWindow中输入框与输入法冲突问题(PopupWindow输入框被遮挡)
- Webview输入框被输入法遮挡的问题
- Android浏览器应用搜索输入框被输入法遮挡问题
- 解决 android 输入法弹出输入框被遮挡的问题
- Android中防止EditText输入框被输入法遮挡(画面随输入法自适应)
- 输入法遮挡登录按钮及输入框问题
- scrollTop()解决IOS中输入法遮挡输入框
- UItableView中含输入框(TextField)被键盘遮挡问题
- 在移动web开发中,手机横屏时,输入框输入时被系统键盘遮挡!
- JS-IOS输入法遮挡输入框解决办法
- 解决移动端Web安卓机点击输入框,输入法遮挡输入框的问题
- 【Python版】OpenCV学习笔记(2):读取和写入图像
- Java 日志组件slf4j+logback使用实例
- redis持久化机制
- Jhuster 的博客
- Android EditText 银行卡4位一空 删除的时候光标不错乱
- 手机网页中输入框被输入法遮挡问题
- 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数。
- ORACLE的SQL JOIN方式小结
- javascript前端如何使用google-protobuf
- 基于概率论的分类方法:朴素贝叶斯
- linux matlab pathdef 的寻找与定义问题
- js实现跨域请求的若干方法
- 求大佬看看在bmp截图中的错误 以下为截图
- Xposed框架详解