2

我正在尝试使用 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

4

4 回答 4

1 
$("#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 的引用。

于 2013-08-19T19:22:34.683 回答
1

尝试这个

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

这是代码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>
于 2013-08-19T19:32:48.390 回答
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”单击处理程序之外。无需多次连接。在这里更新了小提琴。

可以在这里找到一个示例 JsFiddle 。

于 2013-08-19T19:33:10.337 回答
0

您可以使用 HTML5 contenteditable="true"

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

接下来，您应该按照本文所述将处理程序附加到段落的事件模糊以保存数据。

于 2013-08-19T19:22:32.390 回答