问题:移动端网页,当用户点击输入框时,手机弹出的输入法会覆盖输入框,影响用户体验。
解决思路:用户点击输入框后,让整个页面向上滑动一定距离,让输入框高于输入法即可。
代码实现:
<input type="text" id="name" οnfοcus="NameChangeHeight()" />
function NameChangeHeight() {
setTimeout(function () { $('body').scrollTop(200px); }, 500);
}
解析:有人说,为什么直接用$('body').scrollTop(200px)不起作用?加上setTimeout就可以了?因为输入法弹出来也是需要一定时间的,输入法弹出来后才会计算、改变scrollTop。