HTML5-虚拟键盘出现挡住输⼊框的解决办法
1，问题描述
我们使⽤ H5 做移动 App，或者进⾏移动⽹站开发时。如果⽂本输⼊框在整个页⾯的下⽅，当我们点击输⼊框要输⼊⽂字时，系统弹出的虚拟键盘就会将输⼊框给挡住。（这个只有在Android 系统下会有这个问题，iOS 系统会⾃动将整个页⾯上移动。）
html内容文本框
2，解决办法
我们可以借助元素的 scrollIntoViewIfNeeded() ⽅法。这个⽅法执⾏后如果当前元素在视⼝中不可见，则会滚动浏览器窗⼝或容器元素，最终让它可见。如果当前元素在视⼝中已经是可见的，这个⽅法什么也不做。
3，样例代码
这⾥使⽤了 jQuery 绑定了所有输⼊框（textinput、textarea）的点击事件，这样当输⼊框被点击后就调⽤它
的 scrollIntoViewIfNeeded() ⽅法，保证输⼊框可见。（延迟400毫秒出现时有些 Android ⼿机键盘出现的⽐较慢）
1 2 3 4 5 6 7 8//防⽌键盘把当前输⼊框给挡住
$('input[type="text"],textarea').on('click', function() {  var target = this;
setTimeout(function(){
target.scrollIntoViewIfNeeded();
console.log('scrollIntoViewIfNeeded');
},400);
});
最终效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。