javascript - jQuery 文本输入？

Question

我有一个简单的布局，带有一个文本 block 和一个 <a> ，例如:

text1 edit

当我点击<a>时，我希望这个文本 block 成为文本输入。这怎么可能用 jQuery 实现呢？

Answer 1

使用 jQuery replaceWith() :

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        $(this).parent().replaceWith("<input />");
    });
});

http://jsfiddle.net/Dqkyg/1/

<小时/>

此外，您可以使用链接外部的文本填充文本框，如下所示:

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
    });
});

http://jsfiddle.net/Dqkyg/5/

<小时/>

以下内容将用“保存和取消”选项替换编辑:

<div>
    <span class="text">testing</span> <a href='#'>test</a>
</div>

$(document).ready(function(){
    $("a").click(function(e){
        e.preventDefault();
        var txt = $(".text").html();
        $(".text").replaceWith("<input value='" + txt + "' />");
        $(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
    });
});

http://jsfiddle.net/Dqkyg/6/