在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框。这会很影响用户体验,于是在网上找到了如下的解决办法:
方法一:使用window.scrollTo()
1 <input type="text" onfocus="inputFocus()"/>
1 <script> 2 function inputFocus(){ 3 setTimeout(function(){ 4 window.scrollTo(0,document.body.clientHeight); 5 }, 500); 6 } 7 </script>
设计坞官网https://www.wode007.com/sites/73738.html
方法二:使用scrollIntoView
1 <input type="text" onfocus="inputFocus()" id="dom"/> 2 <script> 3 function inputFocus(){ 4 var dom=document.getElementById(‘dom‘) 5 setTimeout(function(){ 6 dom.scrollIntoView(true); 7 dom.scrollIntoViewIfNeeded(); 8 }, 500); 9 } 10 </script>