Question

假设我有一个带有textarea的简单HTML页面，我想将该textarea包装在DIV中。但是，这并不总是在启动/页面加载时发生，因此用户可能会关注该区域，甚至是键入。

我可以通过创建DIV来移动/包裹该区域，将其附加到textarea的父级，然后将textarea放在其中，它可以很好地工作。但是，当我这样做时，焦点将从textarea中删除，如果用户正在打字，他们就会生气。

如何在不中断用户的情况下移动textarea的DOM节点？这甚至可能吗？

Answer 1

根据浏览器的不同，您可以使用document.activeElement确定哪个元素具有焦点。在执行移动之前保存该值，然后在textarea中使用.focus（）设置焦点与您保存的元素相同。

Answer 2

好吧，重新聚焦（使用focus()）是一回事，但你也想要将用户的光标保持在同一位置（如果他是一个，可能还是他当前的选择）。但是，可以使用document.selection / range API查看https://developer.mozilla.org/en/DOM/range。

这个link描述了在IE中使用该API的解决方案（略有不同的问题）。

Answer 3

移动所有内容后，您只需重置焦点。

使用

.focus()

移动后在textArea上。

Answer 4

将textarea附加到div之后，您只需将焦点调在textarea上，在此fiddle

中进行了演示

<强> HTML

<textarea id="test">test</textarea>

<强> JAVASCRIPT

var textarea = document.getElementById('test');

setTimeout(function(){
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.appendChild(textarea);
    textarea.focus();
    console.log('appended');
},2000);

我可以在保留焦点的同时移动DOMElement吗？

4 个答案: