在跨DOM移动输入时将光标保留在html输入中

问题描述：

当我将元素移动到DOM时，是否有任何简单的方法将光标保留在输入元素中？在跨DOM移动输入时将光标保留在html输入中

<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更受欢迎。

在此先感谢您的答案。

这样的事情？ http://jsfiddle.net/mq4grbmw/ – 2014-09-01 14:14:17

$（'input'）。focus（） – Sami 2014-09-01 14:14:50

对不起，这不会帮助，因为我评论下面的答案。我试图更新示例以使其更清晰 - 我有更多的输入，我需要将焦点保留在之前的输入中，而不仅仅是在移动之后集中单个输入。 – amik 2014-09-01 15:16:12

答

像这样的东西应该做的伎俩。

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

谢谢，差不多就是这样。然而，MSIE（在11中测试过）关注元素，但是不放置光标（我只能梦想将光标放在IE中的原始位置），这在其他浏览器中自动完成，甚至到原来的位置。是否有适合MSIE的解决方案，至少9,10和11？ – amik 2014-09-02 18:59:11

我不知道，但这个SO项目可能是相关的：http://stackoverflow.com/questions/1326993/jquery-focus-sometimes-not-working-in-ie8 – 2014-09-06 17:42:59

谢谢，这有助于：setTimeout（function（） {focusedElement.focus（）;}，10）; – amik 2014-09-07 18:25:44

答

您可以使用focus()专注于一个元素。

如果我以您的jsfiddle为例，您只需在切换后在您的功能中添加$('input').focus();即可。你很好走。

所以：

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

DEMO

谢谢，但1）我不知道输入是否在移动之前关注 - 您的脚本将在移动DOM后始终关注它 - 这不是我想要的，我想在重新组织DOM之前保持焦点。 2）正如我所说，我在网站上有很多输入，所以我必须确定移动前焦点的位置，而不是只关注任何特定输入。所以，这不会有帮助。 – amik 2014-09-01 15:12:01

请参阅下面的答案：http://stackoverflow.com/a/25610631/289203 – 2014-09-01 17:31:57

在跨DOM移动输入时将光标保留在html输入中

相关推荐