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
– amik, Commented Sep 1, 2014 at 15:16

Community · Accepted Answer · 2014-09-02 19:30:35Z

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 2, 2014 at 19:30

CommunityBot

11 silver badge

answered Sep 1, 2014 at 17:31

Luke H

3,17329 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

amik Over a year ago

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?

Luke H Over a year ago

I'm not sure but this SO item may be relevant: stackoverflow.com/questions/1326993/…

amik Over a year ago

thanks, this helped: setTimeout(function(){ focusedElement.focus(); }, 10);

Déjà vu · Accepted Answer · 2014-09-01 14:18:10Z

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 1, 2014 at 14:18

Déjà vu

7812 gold badges9 silver badges33 bronze badges

1 Comment

amik Over a year ago

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.

Collectives™ on Stack Overflow

Keep cursor in html input when moving the input across DOM

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related