在移動端h5開發的時候,發現如果input在頁面底部,當觸發input焦點的時候會彈出系統虛擬鍵盤,虛擬鍵盤會遮擋input輸入框。這會很影響用戶體驗,於是在網上找到了如下的解決辦法:
方法一:使用window.scrollTo()
<input type="text" onfocus="inputFocus()"/>
<script>
function inputFocus(){
setTimeout(function(){
window.scrollTo(0,document.body.clientHeight);
}, 500);
}
</script>
方法二:使用scrollIntoView
<input type="text" onfocus="inputFocus()" id="dom"/>
<script>
function inputFocus(){
var dom=document.getElementById('dom')
setTimeout(function(){
dom.scrollIntoView(true);
dom.scrollIntoViewIfNeeded();
}, 500);
}
</script>
.
