jQuery .wrap() 无需重新聚焦

Posted 2023-05-09

【中文标题】jQuery .wrap() 无需重新聚焦

【英文标题】：jQuery .wrap() without needed refocusing

【发布时间】：2014-03-24 04:12:42

【问题描述】：

我需要用 div 包装输入，但在 .wrap() 输入模糊之后。如何修复？

<input type="text">

<script>
    $("input").on("keypress", function()
        $(this).wrap("<div></div>");
    )
</script>

http://jsfiddle.net/n3W3W/

【问题讨论】：

这会在每次按键时触发wrap，但我想你知道吗？只是看起来你正在尝试做的事情可能有更好的解决方案......

【参考方案1】：

首先，解释一下发生了什么：

当您调用wrap 时，jQuery 正在从 DOM 中删除输入。它创建一个 DIV 元素，附加输入，然后重新附加到 DOM。由于输入已从 DOM 中移除，因此您失去了焦点。

解决此问题的最简单方法是在wrap 之后调用focus。追加DIV元素后，jQuery会触发对input元素的关注。

在这里提琴：http://jsfiddle.net/2PgR8/

但是，这有 user13500 在 cmets 中提到的问题。也就是说，输入元素始终包含在 DIV 中。你最终会得到一个 DOM 结构，例如：

<div>
    <div>
        <div>
            <div>
                <input></input>
            </div>
        </div>
    </div>
</div>

如果你输入“cool”...所以不是每个都有效率:)

请问将输入包装在 DIV 中的目的是什么？您可以通过条件检查限制wrap，例如：

if($(this).data('is-wrapped') === undefined) 
    $(this).wrap('<div></div>').data('is-wrapped', true).focus();

如果你有它的要求......这是一个小提琴！ http://jsfiddle.net/2PgR8/1/