Могу ли я переместить элемент DOME, сохранив фокус?

Question

Предположим, у меня есть простая HTML-страница с textarea, и я хочу обернуть ее textarea в DIV.Однако это не всегда происходит при запуске / загрузке страницы, поэтому пользователь может сосредоточиться на этой области или даже набирать текст.

Я могу переместить / обернуть область, создав DIV, добавив его кродителя textarea, затем поместите внутрь него textarea, и это прекрасно работает.Однако, когда я делаю это, фокус удаляется с textarea, и если пользователь набирал текст, он будет злиться.

Как мне переместить textareaDOM узел, не прерывая пользователя?Это вообще возможно?

Answer 1

В зависимости от браузера вы можете определить, какой элемент имеет фокус, используя document.activeElement.Сохраните значение перед выполнением перемещения, а затем после этого установите фокус обратно, используя .focus (), в текстовой области тот же элемент, что и у вас.

Answer 2

Что ж, перефокусировка (с использованием focus()) - это одно, но вы также захотите сохранить курсор пользователя в том же месте (и, возможно, его текущее выделение, если он сделан).Возможно, однако, используя API document.selection / range, см. https://developer.mozilla.org/en/DOM/range.

Эта ссылка описывает решение (немного другую проблему) с использованием этого API вIE.

Answer 3

Вам нужно сбросить фокус только после того, как вы все переместили.

Используйте

.focus()

На вашем текстовом поле после перемещения.

Answer 4

После добавления текстовой области в div вы просто должны вызвать фокус на текстовой области, продемонстрированной в этой скрипке

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);