Question

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

Answer 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。

Answer 2

试试这个

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>

Answer 3

我会使用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();
});

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

可以找到一个示例JsFiddle here。

Answer 4

您可以使用HTML5 contenteditable =“true”

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

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

JQuery编辑到位，没有插件

4 个答案: