JQuery 就地编辑，没有插件答案

【问题标题】：JQuery Edit in Place, No PluginsJQuery 就地编辑，没有插件
【发布时间】：2013-08-21 16:33:28
【问题描述】：

我正在尝试使用 Jquery（没有插件）来启用就地编辑控件。我想要的功能是这样的。单击段落时，该段落将转换为可编辑的文本区域。一旦用户点击段落（失去焦点），文本将被保存。

我在下面有以下代码，目前第 1 部分正在运行，但是当我点击可编辑区域时，textarea rows="10" cols="160 会生成我不能打字。这是我所拥有的

$("#Para1").click(function () {
            var textarea = '<div><textarea rows="10" cols="160">' + $(this).html() + '</textarea>';
            $(this).html(textarea);
            $("textarea.textarea").focus();

            $("textarea.textarea").blur(function () {
                var value = $(this).val();
                $("#Para1").text(value);

            });

我已尝试根据以下链接构建我的代码，但没有成功。

http://www.unleashed-technologies.com/blog/2010/01/13/jquery-javascript-easy-edit-place-input-boxes-and-select-boxes

【问题讨论】：

标签： jquery asp.net

【解决方案1】：

我会使用 2 个 html 元素来解决这个问题，这些元素会在必要时显示/隐藏：

<div id="Para1">blabla</div>
<textarea id="editable" style="display:none" rows="10" cols="160"></textarea>

然后使用以下Javascript：

$("#Para1").click(function () {
    $('#editable').html($(this).html()).show().focus();
    $(this).hide();
});

$("#editable").blur(function () {
    $('#Para1').html($(this).val()).show();
    $('#editable').hide();
});

编辑：将“#editable”上的点击处理程序移到“#Para1”点击处理程序之外。无需多次连接。更新了小提琴here。

可以在here找到一个示例 JsFiddle。

【讨论】：

完美，在这种情况下，您会将此回复标记为最终答案吗？ :)

【解决方案2】：

$("#Para1").click(function () {
    var textarea = '<div><textarea class="editable" rows="10" cols="160">' + $(this).html() + '</textarea>';
    $(this).html(textarea);
    $("textarea.editable").focus();

    $("textarea.editable").blur(function () {
        var value = $(this).val();
        $("#Para1").html(value);

    });
});

您没有在生成的 html 中为您的 textarea 分配类。但是，您是通过 .textarea 类引用它。我添加了一个可编辑类并更改了您对 textarea.editable 的引用。

【讨论】：

【解决方案3】：

试试这个

http://jsbin.com/UmelOku/1/edit?html,js,output

这里是代码 JS：

$("#Para1").click(function () {
  $(this).css('display','none');
  $('textarea').css('display', 'block');
  $('textarea').val($(this).text());
  $('textarea').focus();
});

  $('textarea').blur(function () {
  var value = $(this).val();
  $("#Para1").text(value);
  $(this).css('display','none');
  $('#Para1').css('display', 'block');
  });

HTML：

<p id="Para1">Test</p>
<textarea style="display:none;" rows="10" cols="160"></textarea>

【讨论】：

感谢您的建议，我将标记 eric 的答案只是因为如果我可以标记 2，它会更干净一些

【解决方案4】：

您可以使用 HTML5 contenteditable="true"

<p contenteditable="true">
    Lorem ipsum
</p>

接下来，您应该按照this post 中的说明将处理程序附加到段落的事件模糊以保存数据。

【讨论】：