跨 DOM 移动输入时将光标保持在 html 输入中答案

【问题标题】：Keep cursor in html input when moving the input across DOM跨 DOM 移动输入时将光标保持在 html 输入中
【发布时间】：2014-09-01 14:09:06
【问题描述】：

当我在 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。

提前感谢您的回答。

【问题讨论】：

这样的？ jsfiddle.net/mq4grbmw
对不起，这无济于事，因为我在下面评论了答案。我尝试更新示例以使其更清晰 - 我有更多输入，我需要将焦点保持在之前的输入中，而不仅仅是在移动后关注单个输入。

标签： javascript jquery html dom

【解决方案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);

【讨论】：

谢谢，差不多了。但是，MSIE（在 11 中测试）聚焦元素，但没有将光标放在其中（我只能梦想将光标放在 IE 中的原始位置），这在其他浏览器中甚至会自动完成到原始位置。是否有适合 MSIE 至少 9,10 和 11 的解决方案？
我不确定，但这个 SO 项目可能是相关的：stackoverflow.com/questions/1326993/…
谢谢，这有帮助：setTimeout(function(){focusedElement.focus(); }, 10);

【解决方案2】：

您可以使用focus() 来关注某个元素。

如果我以您的 jsfiddle 为例，您只需在切换后的函数中添加 $('input').focus(); 即可。一切顺利。

所以：

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

DEMO

【讨论】：

谢谢，但是 1) 我不知道输入是否在移动之前聚焦 - 您的脚本将始终在移动 DOM 之后聚焦它 - 这不是故意的，我想将焦点保持在原来的位置在重组 DOM 之前。 2）正如我所说，我的网站上有很多输入，所以我必须在移动之前确定焦点在哪里，而不仅仅是关注任何特定的输入。所以，这无济于事。