Держите курсор в вводе html при перемещении ввода через DOM

Question

есть ли простой способ держать курсор в элементе ввода, когда я перемещаю элемент по DOM?

Пример: http://jsfiddle.net/y1nu1q4f/1/

<form> 
    <input type='text' name='a' /> ho ho ho 
    <input type='text' name='b' /> merry christmas 
</form> 
<script> 
setTimeout(function(){ 
    $('input[name="a"]').appendTo($('form')); 
    $('input[name="b"]').appendTo($('form')); 
}, 3000); 
</script> 

Этот пример перемещает ввод текста через 3 секунды. Когда вход сфокусирован (курсор внутри), он теряет фокус при перемещении. Можно ли сохранить/вернуть курсор в исходное положение?

В моем приложении у меня есть много входов в форме, которая DOM реорганизуется именно так, поэтому мне нужно некоторое простое и гибкое решение, не добавляя кучу дополнительных атрибутов и кода для каждого ввода. Решение jQuery предпочтительнее чистого javascript.

Заранее благодарим за ответы.

Answer 1

Что-то вроде этого следует сделать трюк.

setTimeout(function(){ 
    var focusedElement = jQuery(':focus'); // ideally specify tag, class or ID here before the ':focus' to avoid jQuery scanning all elements on the page. 

    $('input[name="a"]').appendTo($('form')); 
    $('input[name="b"]').appendTo($('form')); 

    if (focusedElement && focusedElement.length) { //fixed var name here 
     focusedElement.focus(); 
    } 
}, 3000); 

Answer 2

Вы можете использовать focus(), чтобы сфокусироваться на элементе.

Если я возьму ваш пример jsfiddle, вы просто добавите $('input').focus(); в свою функцию после переключения. И тебе хорошо идти.

Итак:

setTimeout(function(){ 
    $('input').appendTo($('form')); 
    $('input').focus(); 
}, 3000}; 

DEMO