使用 jQuery 的可编辑文本功能答案

【问题标题】：Editable text functionality using jQuery使用 jQuery 的可编辑文本功能
【发布时间】：2011-04-29 09:53:54
【问题描述】：

我有一个图像按钮，当我单击它时，我希望特定字段从文本变为可编辑的文本字段，有点像动态编辑按钮。

所以我有带有特定 id 的纯文本（即 id="text1"），当我单击按钮时，文本变为可编辑字段，可能类似于 $("#text1").hide(); 然后 $("#field1").show(); 但介于两者之间我需要为该字段提供文本的值，然后当我单击“保存”按钮时，我应该隐藏输入字段并仅显示具有新值的文本。

任何帮助将不胜感激。

谢谢:D

【问题讨论】：

标签： jquery function hide show edit

【解决方案1】：

给定一个输入字段，一个带有id="text1"的段落和一个按钮。

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

这个简单的 jQuery 将从段落中复制文本，将其隐藏并使用段落中的文本显示输入。

$("button").click(function() {
   $("input").val(
       $("#text1").hide().text()
   ).show();
});

Here's a sample.

只是为了好玩，我编写了一个小脚本，为段落启用<editable> 功能。只需在任何段落中添加一个.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)
});

SAMPLE

您确实不需要所有 ID，但如果您要使用新值进行 POST，您可以轻松引用元素。

【讨论】：

我的印象是 OP 想要从一个文本节点（比如 p）更改为 textarea，而不是从 <input type="text" />。
@David - 你说得对，我完全误解了这一点。稍作修改以适应。
@Marko，所以我看到了。 +1 用于编辑，以及来自 'hood =) 的 lorem ipsum
@Marko - 代码几乎是完美的，但我应该能够多次编辑它，而不仅仅是一次
另外，我刚刚注意到id发生了变化，它根本不应该改变。

【解决方案2】：

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

实际上，你甚至不需要我认为不需要的温度，它应该看起来像

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

请注意，这是未经测试的。您可能会发现 this SO article 也很有价值。

【讨论】：

【解决方案3】：

$(document).ready(function(){

    $('#mod').click(function(){

    $('#text1').html('<input id="no" size="'+$(this).text().length+'" type="text" value="'+ $('#text1').text() + '">');
      
    $('#mod').hide();

    $('#sav').show();

    });

    $('#sav').click(function(){
						     
    // here code to save data in database

    });   
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <td id="text1"> text </td>
    <input type="button" id="mod" name="modify"  value="modify" />
    <input type="submit" name="submit" id="sav" value="save" />
    </table>

【讨论】：