移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法

在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法:

方法一:使用window.scrollTo()

 <input type="text" onfocus="inputFocus()"/>
 <script>
function inputFocus(){
setTimeout(function(){
window.scrollTo(,document.body.clientHeight);
}, );
}
</script>

设计坞官网https://www.wode007.com/sites/73738.html

 

方法二:使用scrollIntoView

 <input type="text" onfocus="inputFocus()" id="dom"/>
<script>
function inputFocus(){
var dom=document.getElementById('dom')
setTimeout(function(){
dom.scrollIntoView(true);
dom.scrollIntoViewIfNeeded();
}, );
}
</script>
上一篇:移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法


下一篇:【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件