¿Hay alguna manera simple de mantener el cursor en un elemento de entrada cuando muevo el elemento a través de DOM?

Ejemplo: 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>

Este ejemplo mueve el ingreso de texto después de 3 segundos. Cuando la entrada está enfocada (el cursor está adentro), pierde el foco cuando se mueve. ¿Es posible mantener / devolver el cursor a su posición original?

En mi aplicación, tengo muchas entradas en una forma cuyo DOM se está reorganizando de esta manera, por lo que necesito una solución simple y flexible, sin poner un montón de atributos adicionales y código para cada entrada. Se prefiere la solución jQuery a JavaScript puro.

Gracias por adelantado por las respuestas.

0
amik 1 sep. 2014 a las 18:09

2 respuestas

La mejor respuesta

Algo como esto debería hacer el truco.

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);
1
Community 2 sep. 2014 a las 19:30

Puedes usar focus() para enfocarte en un elemento.

Si tomo su jsfiddle como ejemplo, solo agrega $('input').focus(); en su función después del cambio. Y estás listo para irte.

Así que:

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

Demo

0
Déjà vu 1 sep. 2014 a las 14:18