javascript - jQuery .wrap() 无需重新聚焦

Question

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

<input type="text">

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

http://jsfiddle.net/n3W3W/

Answer 1

首先，解释一下正在发生的事情:

当您调用wrap时，jQuery 将从 DOM 中删除输入。它创建一个 DIV 元素，附加输入，然后重新附加到 DOM。因为输入已从 DOM 中删除，所以您会失去焦点。

解决此问题的最简单方法是在 wrap 之后调用 focus。附加 DIV 元素后，jQuery 将触发 input 元素上的焦点。

在这里摆弄:http://jsfiddle.net/2PgR8/

但是，这存在 user13500 在评论中提到的问题。也就是说，输入元素始终包裹在 DIV 中。您最终会得到如下 DOM 结构:

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

如果你输入“cool”...那么并不是所有效率都高:)

请问将输入包装在DIV中的目的是什么？您可以使用条件检查来限制换行，例如:

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

如果您有要求......这是一个 fiddle ! http://jsfiddle.net/2PgR8/1/