在跨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更受歡迎。

在此先感謝您的答案。

來源

2014-09-01 amik

這樣的事情？ 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);

來源

2014-09-01 17:31:31

謝謝，差不多就是這樣。然而，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

來源

2014-09-01 14:18:10

謝謝，但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輸入中

回答

相關問題