使用jQuery的可编辑文本功能

我有一个图像按钮，当我点击它时，我想要一个特定的字段从文本变成一个可编辑的文本字段，有点像一个动态编辑按钮

因此，我使用了具有特定id的纯文本（即id=“text1”），当我单击按钮时，文本将变为可编辑字段，可能类似于

$（“#text1”）.hide（）$（“#field1”）.show（）但在这两者之间，我需要为字段提供文本的值，然后当我单击“保存”按钮时，我应该隐藏输入字段并仅显示具有新值的文本

任何帮助都将不胜感激

谢谢：还不错。文本进入文本字段的值区域。因此，从文本区域获取它，将其保存在临时变量中，并将其放入文本字段

事实上，你甚至不需要临时工我不认为，它应该看起来像

$('#field1').val($('#text1').text)

注意这是未经测试的。您可能会发现它也很有价值。
给定一个输入字段，一个带有
id=“text1”
的段落和一个按钮

<input type="text" />
<p id="text1">Lorizzle ipsizzle dolizzle sit amizzle, consectetuer adipiscing yo mamma.</p>
<button>Copy</button>


为了好玩，我编写了一个小脚本，可以为段落启用
功能。只需在任何段落中添加一类
.editable
，jQuery就会处理其余部分。我没有扩展它以允许多个编辑，我几乎开始编写AJAX调用来保存到数据库，因为我很无聊但是既然阳光明媚，我想我宁愿去海滩。这是我的代码和示例

$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);

    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());

        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});

$（“.editable”）。每个（函数（i）{
var$this=$（this）；
$this.attr（“id”，“orig-”+i）；
变量$edit=$（“”）
.文本（“编辑”）
.attr（“id”，“更新-”+i）
。单击（函数（）{
变量$input=$（''）
.attr（“id”、“编辑”+i）
.val（$this.text（））；
变量$save=$（'save'）
。单击（函数（）{
var$new=$（“
”）text（$input.val（））；
$input.replaceWith（$new）；
$（this.hide（）；
});
$（此）.替换为（$save）；
$this.replacement为（$input）；
});
$（此）.after（$edit）
});


你真的不需要所有的ID，但是如果你想用新的值发布帖子，你可以很容易地引用元素。
$（文档）.ready（函数（）{
$（'#mod'）。单击（函数（）{
$（'#text1'）.html（''）；
$（'#mod'）.hide（）；
$（'#sav'）.show（）；
});
$（'#sav'）。单击（函数（）{
//这里是将数据保存在数据库中的代码
});   
});    


正文
我觉得OP想要从文本节点（比如a
p
）更改为
textarea
，而不是从
@David-没错，我完全误解了这一点。已经稍微修改过以适应。@Marko，我看到了+1用于编辑，以及来自'hood=）@Marko的lorem ipsum-代码几乎完美，但我应该能够多次编辑它，而不仅仅是一次。我只是注意到id发生了变化，它根本不应该发生变化。
$(".editable").each(function(i) {
    var $this = $(this);
    $this.attr("id", "orig-" + i);

    var $edit = $("<button />")
    .text("edit")
    .attr("id", "update-" + i)
    .click(function() {
        var $input = $('<input type="text" />')
            .attr("id", "edit" + i)
            .val($this.text());

        var $save = $('<button>Save</button>')
            .click(function() {
                var $new = $("<p />").text($input.val());
                $input.replaceWith($new);
                $(this).hide();
            });
        $(this).replaceWith($save);

        $this.replaceWith($input);
    });

   $(this).after($edit)
});