H5输入框获取焦点,软键盘弹出会遮挡表单问题
来源:互联网 发布:python 自带 IDLE 编辑:程序博客网 时间:2024/06/05 18:40
手机内的页面,在点击输入框的时候,会弹出软键盘。在苹果手机上,会自动定位输入框在屏幕上下居中(软键盘和页面顶部之间可见的屏幕)。但是安卓手机不会定位,所以要处理下安卓手机的情况。
/*监听input状态,屏幕滚动到input,上下居中 *在安卓手机上屏幕尺寸变化会产生resize事件。所以监听resize事件。 *然后定位到input框。 */window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ document.activeElement.scrollIntoView({behavior: "smooth"}) } })
这个方法最好在高版本手机app内,或者浏览器内。因为方法还是属于试验中功能。
兼容性详情请见:点击这里
以上方法是结合百度,还有看了部分先人的代码,然后根据自己的业务写的。有需要的同学可以根据自己的业务修改代码。
如有错误,请大神指点,thanks
阅读全文
0 0
- H5输入框获取焦点,软键盘弹出会遮挡表单问题
- Android弹出软键盘遮挡输入框问题.
- h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框
- WebView 中 H5 页面的软键盘遮挡输入框
- h5页面软键盘遮挡弹窗中的输入框
- android软键盘遮挡输入框问题
- H5 ios input获取焦点挂起软键盘 输入框被遮盖 页面被顶起
- Android EditText 自动弹出软键盘,遮挡输入框
- 解决popupwindow中有输入框的时候,弹出软键盘遮挡布局的问题
- Android WebView中软键盘会遮挡输入框相关问题
- Android WebView中软键盘会遮挡输入框相关问题
- Android WebView中软键盘会遮挡输入框相关问题
- Android WebView中软键盘会遮挡输入框相关问题
- Android中的EditView如何不默认获取焦点弹出软键盘,点击EditView后会弹出?
- 解决刚进入APP时搜索框获取焦点,软键盘自动弹出的问题
- ios解决软键盘遮挡输入框问题
- Android WebView 软键盘遮挡输入框问题的解决方法
- js解决软键盘遮挡输入框问题
- ROS nodelet 使用详解
- 前端跨域请求原理及实践
- JAVA开发的23种设计模式之 --- 外观模式
- Drools 规则引擎----向领域驱动进步(六)
- c语言的二分查找简单实例
- H5输入框获取焦点,软键盘弹出会遮挡表单问题
- 给超链接加onclick事件
- 双系统下卸载ubuntu暨在引导项删除ubuntu
- Python字符
- daterangepicker
- HDU 6143 Killer Names
- PPTP+L2TP+SSTP+OPENVPN绝对穿透的动态IP 拨号
- Android,安卓,toolbar,menu显示位置
- HDU 6136 Death Podracing(优先队列+循环链表)