最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 虚拟键盘出现挡住输入框的解决办法
时间：2022-06-25 18:11:33 编辑：袖梨 来源：一聚教程网
1，问题描述
我们使用 H5 做移动 App，或者进行移动网站开发时。如果文本输入框在整个页面的下方，当我们点击输入框要输入文字时，系统弹出的虚拟键盘就会将输入框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会自动将整个页面上移动。）
2，解决办法
我们可以借助元素的 scrollIntoViewIfNeeded() 方法。这个方法执行后如果当前元素在视口中不可见，则会滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中已经是可见的，这个方法什么也不做。
3，样例代码
这里使用了 jQuery 绑定了所有输入框（textinput、textarea）的点击事件，这样当输入框被点击后就调用它的 scrollIntoViewIfNeeded() 方法，保证输入框可见。（延迟400毫秒出现时有些 Android 手机键盘出现的比较慢）
//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
最终效果：
相关文章
- 如何选择适合宝宝的泰坦之旅技能？（宝宝技能选择攻略，让您的宝宝在泰坦之旅中脱颖而出！） 04-23
- 火车票余票查询通道-火车票硬卧余票实时查 04-23
- 《重返帝国橙色技能搭配攻略》（打造最强战力，玩转帝国的必备技能搭配） 04-23
- 虫虫漫画高清完整版怎么查看-最新访问路径与内容阅读方法说明 04-23
- 极游社怎么租号 04-23
- 微博手机网页版入口-微博网页版直接访问 04-23