移动端页面的定位会影响光标位置,相信很多人都遇到过,然而在整个页面没有用到定位的情况下还是遇到了光标错位的问题。
原因是移动端在点击input输入的时候软键盘弹出,整个页面被键盘往上挤压,然而光标的位置也被挤压,收起软键盘的时候页面恢复,但是光标还是在原来input的位置,就导致光标不在该在的地方,整个页面呈现无法点击的状态,用户体验极差。
解决方法:
在软键盘收起(也就是失焦)的时候scrollTop回顶部,或者使用window.reload(),贴上我的代码
$("input").blur(function(){
setTimeout(function(){
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
},100)
})
或者使用reload:
$('textarea,input[type=text]').focus(function () {
window.setTimeout('scrollBottom()', 500);
});
function scrollBottom() {
window.scrollTo(0, $('body').height());
}