带有 textarea 错误的移动 Safari 滚动至

Posted

技术标签:

【中文标题】带有 textarea 错误的移动 Safari 滚动至【英文标题】:Mobile Safari scrollTo w/ textarea bug 【发布时间】:2010-02-18 18:10:59 【问题描述】:

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

问题:如果用户正在将文本输入到 textarea 并执行了 window.scrollTo(),则光标仍会呈现在 textarea 使用到的位置是,不在它的当前位置。

重新创建:使用移动 Safari 加载以下网页。触摸文本区域,这将打开键盘。输入几个字符并等待。随着文本动态添加到页面,并且窗口滚动,您将看到光标工件

尝试在滚动后将focus()设置回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>

这是显示问题的照片:

【问题讨论】:

Apple 在这方面有开票吗? 我确实提交了一些东西,但从那以后就没有听到任何消息了...已经转移到其他东西所以还没有尝试使用 ios 4。 【参考方案1】:

我很确定这可能解决了这个问题,而且很可能还会让屏幕键盘闪烁并重新打开一点点。使用scrollTo()后调用此代码:

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

【讨论】:

试过这个。它确实解决了这个问题,但我对键盘的突然打开和关闭不满意。如果滚动发生在击键中间,则难以继续输入。 据我所知,这是您唯一的解决方案,因为如果不实际修复软件本身就无法真正修复此错误。

以上是关于带有 textarea 错误的移动 Safari 滚动至的主要内容,如果未能解决你的问题,请参考以下文章

带有过渡和 translateY 的 Safari 错误:“跳跃”元素

当 textarea 聚焦时,iOS Safari css 位置已修复

带有.css左/右的Safari iOS 9.0.2 jquery错误

textarea调整大小的移动浏览器问题

移动 Safari - 使用 Javascript 关闭键盘

强制链接从带有 javascript 的 Web 应用程序在移动 Safari 中打开