HTML5 虚拟键盘出现挡住输入框的解决办法(安卓)
2018-02-26 20:32
246 查看
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);
});
//防止键盘把当前输入框给挡住
$$('input[type="text"],textarea').on('click', function () {
var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
相关文章推荐
- HTML5 虚拟键盘出现挡住输入框的解决办法
- HTML5 虚拟键盘出现挡住输入框的解决办法
- input输入框在移动端出现光标无法垂直居中的问题解决办法
- ios输入框被键盘挡住的解决办法
- android虚拟键盘挡住了输入框处理办法!
- [转]ios输入框被键盘挡住的解决办法
- 安卓中出现Android library projects cannot be launched的解决办法
- android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法
- android虚拟键盘挡住了输入框处理办法!
- 安卓中出现Jar mismatch! Fix your dependencies的解决办法
- [Unity]关于Unity5.5以及5.4.x中的UGUI在安卓中出现Image不显示的BUG的解决办法
- 微软远程桌面(安卓版)连接出现0x204错误的解决办法
- android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法
- android全屏/沉浸式状态栏下,各种键盘挡住输入框解决办法
- 通过assets向安卓程序目录中导入数据库文件出现错误的解决办法
- ios输入框被键盘挡住的解决办法
- Android:键盘挡住输入框解决办法
- Android:键盘挡住输入框解决办法 ---- 软输入法模式选项:
- Android各种键盘挡住输入框解决办法
- 虚拟键盘弹出挡住textfield的分析以及解决办法