Keep cursor in html input when moving the input across DOM

Question

is there any simple way to keep cursor in an input element when I move the element across DOM?

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

This example moves the text input after 3 seconds. When the input is focused (cursor is inside), it loses focus when moved. Is it possible to keep/return the cursor to its original position?

In my app I have many inputs in a form which's DOM is being reorganized like this, so I need some simple and flexible solution, not putting bunch of extra attributes and code for each input. jQuery solution is preferred to pure javascript.

Thanks in advance for answers.

Sorry, this won't help as I commented the answer below. I tried to update the example to be more clear - I have more inputs and I need to keep the focus in the input it was before, not just focus single input after moving. — amik, Sep 01 '14 at 15:16

score 1 · Accepted Answer · edited Sep 02 '14 at 19:30

1

Something like this should do the trick.

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

edited Sep 02 '14 at 19:30

Community

1
1

answered Sep 01 '14 at 17:31

Luke H

3,125
27
31

Thanks, that's almost it. However, MSIE (tested in 11) focuses the element, however does not place cursor in it (and I can only dream about placing the cursor to its original position in IE), which is done in other browsers automatically even to the original position. Is there a suitable solution for MSIE at least 9,10 and 11? – amik Sep 02 '14 at 18:59
I'm not sure but this SO item may be relevant: http://stackoverflow.com/questions/1326993/jquery-focus-sometimes-not-working-in-ie8 – Luke H Sep 06 '14 at 17:42
thanks, this helped: setTimeout(function(){ focusedElement.focus(); }, 10); – amik Sep 07 '14 at 18:25

score 0 · Answer 2 · answered Sep 01 '14 at 14:18

0

You can use the focus() to focus on an element.

If I take your jsfiddle as example you just add $('input').focus(); in your function after the switch. And you're good to go.

So:

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

DEMO

answered Sep 01 '14 at 14:18

Déjà vu

774
2
9
31

Thanks, but 1) I don't know if the input was focused before the move - your script will focus it always after moving DOM - this is not intended, I want to keep focus where it was before reorganizing DOM. 2) as I said, I have many inputs on my website, so I must determine where the focus was before the move, not just focus any particular input. So, this won't help. – amik Sep 01 '14 at 15:12

Keep cursor in html input when moving the input across DOM

2 Answers2