移动端弹出软键盘导致input光标错位问题

最新推荐文章于 2025-06-30 09:05:09 发布

原创最新推荐文章于 2025-06-30 09:05:09 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

本文探讨了移动端软键盘弹出导致的页面光标错位问题，提供了两种解决方法：一是通过JavaScript调整scrollTop确保光标正确回位；二是使用reload刷新页面。这两种方案能有效改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端页面的定位会影响光标位置，相信很多人都遇到过，然而在整个页面没有用到定位的情况下还是遇到了光标错位的问题。

原因是移动端在点击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());
  }