Question

在用户将文本输入文本区域时执行window.scrollTo（）时，移动safari如何呈现光标似乎是一个错误。附上说明问题的源代码。我想知道是否有人对如何解决这个问题有任何建议。

问题：如果用户在textarea中输入文本并执行window.scrollTo（），则光标将保留在textarea 使用的位置是的，不是它的当前位置。

重新创建：使用移动版Safari加载以下网页。触摸textarea，将打开键盘。输入几个字符然后等待。当文本动态添加到页面并滚动窗口时，您将看到光标神器

在滚动后尝试将焦点（）设置回textarea，但这似乎没有任何效果。

谢谢！

<html>
<head>
  <meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
  <style type="text/css" media="screen">
       textarea {
           margin-top:50px;
       }
  </style>
  <script type="text/javascript" charset="utf-8">
       window.addEventListener('load', function() {
          setTimeout(addContent,5000);
       }, false);


       function addContent() {
           var elem = document.createElement('p');
           elem.appendChild(document.createTextNode('Some new text'))
           document.getElementById('newContentContainer').appendChild(elem);
           window.scrollTo(0,20);
           setTimeout(addContent,5000);
       }
  </script>
 </head>
 <body>
      <div id="newContentContainer"></div>
      <div>
          <textarea></textarea>
      </div>
 </body>
</html>

这是一张显示问题的照片： alt text

Answer 1

我很确定这个可以解决问题，而且很可能也会让屏幕键盘闪烁并重新开启。使用scrollTo()后调用此代码：

yourTextArea.blur();
yourTextArea.focus();

移动Safari滚动到textarea错误

1 个答案: