TinyMCE：网站在 iOS 上的键盘输入上跳回顶部答案

【问题标题】：TinyMCE: site jumps back to top on keyboard input on iOSTinyMCE：网站在 iOS 上的键盘输入上跳回顶部
【发布时间】：2015-04-23 09:14:06
【问题描述】：

在 iframe 中使用 TinyMCE 时，我在 iOS 上遇到了一个非常奇怪的问题。假设我们有一个包含多个文本区域的表单，每个都包括 TinyMCE 编辑器。现在我们想在第三个文本区域中插入一些东西，所以我们必须向下滚动一点。一旦我们在 textarea 中进行键盘输入，网站就会自动跳回页面顶部。根据我们之前滚动的距离，文本区域可能会被推出视口。因此，您看不到您输入的内容，这显然是一个巨大的 UX 危险信号。

这仅在 iOS 上在 iframe 中使用 TinyMCE 时发生；安卓运行良好。默认情况下，TinyMCE 还在 iframe 中实现其编辑器。所以基本上我们在 iframe 中有一个 iframe，这可能会在 iOS 上引起一些问题。

遗憾的是，删除 iframe 不是一种选择。 textareas 也必须保留，因此无法使用 TinyMCE 的内联选项（afaik）。

这个现象可以用this fiddle来测试。

iframe 的代码仅此而已：

<head>  
  <script type="text/javascript">
    tinymce.init({
      selector: "textarea"
    });
  </script>
</head>
<body>
  <form method="post">
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
    <textarea></textarea>
  </form>
</body>

我非常感谢任何答案和可能的解决方案，因为我已经没有想法了。我怀疑它与我的 Javascript 或 CSS 有关（因为在此示例中没有），但我认为/希望它可以用 CSS 修复。我只是不知道怎么做:)

【问题讨论】：

您能否解决此问题？我遇到了同样的问题，想知道你是否能够解决它。

标签： ios css iframe mobile tinymce

【解决方案1】：

我没有 IOS 来测试它，但你可以尝试看看这种代码和平是否有帮助..

它只是试图将注意力集中在控制上……在初始化钩子上

tinymce.init({
    init_instance_callback: function(e) {
        tinymce.activeEditor.focus();
        // e.execCommand('mceAutoResize');
    }
});

【讨论】：

【解决方案2】：

我也遇到了这个问题，更糟糕的是，整个 tinyMCE 页面都在 iOS 上的原生应用程序的 WebView 中运行。问题是，在 tinyMCE iFrame 内键入或点击时，它会失去焦点并跳回页面顶部。这是我修复它的方法：

在初始化您的 tinyMCE 实例时，您应该定义一个设置函数。在里面，这样做：

editor.on('postRender', function(event) {
  var target = event.target;
  if (!target || !target.contentWindow || !target.contentWindow.focus || typeof target.contentWindow.focus !== 'function') {
    return false;
  }

  var refocus = function() {
    target.contentWindow.focus();
  };

  target.contentDocument.addEventListener('keydown', refocus);
  target.contentDocument.addEventListener('touchstart', refocus);
  target.contentDocument.addEventListener('touchend', refocus);
});

它所做的是在每次按键和触摸事件时重新关注内容框架。确保仅在移动 (iOS) 设备上执行此操作。

希望有帮助！

【讨论】：

【解决方案3】：

如果您同时使用引导程序，则可能会出现问题。如果你同时使用 bootstrap 和 tinymce，意思是相同的形式，那么 bootstrap 就会超越焦点。因此，只需从该表单的所有输入元素中删除表单控件。然后，它会起作用。

【讨论】：