为什么我不能编辑附加的textarea？

Question

我正在尝试将textarea附加到div。一旦添加了textarea，我就无法选择它来开始输入，直到我调整浏览器窗口的大小。我怎样才能在第一时间选择它？

<script>
$("#distraction-mode").click(function(e){ // Entering the distraction mode
        e.preventDefault();
    $("#wysiwyg").appendTo("#wysiwyg-fullscreen");
});
</script>

<div id="wysiwyg-fullscreen-container">
    <div id="wysiwyg-fullscreen"></div> <!-- div where textarea will be -->
</div>

<div id="wysiwyg">
    <textarea id="editor" name="editor" rows="" cols=""></textarea>
    <a href="#" id="distraction-mode">Distraction Mode</a>
</div>

Answer 1

猜测但您可以在textarea上调用.refresh()，然后.focus()。

这是基于文档here

修改
您需要将编辑器设置为变量，以便您可以访问它并能够专门调用它上面的函数。将refresh()和focus()附加到另一个元素后使用它将有希望允许它调整大小并重置自身。

它可能看起来像这样：

<script>
var editor = $("#editor").cleditor()[0];

$("#distraction-mode").click(function(e){
  // Entering the distraction mode
  e.preventDefault();
  $("#wysiwyg").appendTo("#wysiwyg-fullscreen");
  editor.refresh();
  editor.focus();
});
</script>