能够在点击时编辑<p>的文本并更改原始值</p>

Question

有没有办法能够在单击它时编辑<p>元素中的文本，就像点击它时将其作为文本输入一样，我可以自己管理它，但是我想知道一种简单易行的方法。

但是，当您按Enter键或单击文本输入时，我希望它能够更改实际的<p>内容。

谢谢，我尽可能地解释了这一点。

Answer 1

如果您想使用HTML5，可以添加属性contenteditable =“true”

如果你不想在这里使用HTML5是jQuery： http://jsfiddle.net/uGU6p/

Answer 2

你可以使用某种内联编辑插件。我发现了这个：

http://www.arashkarimzadeh.com/jquery/7-editable-jquery-plugin.html

Answer 3

这是我自己的快速推广。它肯定需要一些修饰，但概念似乎很好。

版本2

http://jsfiddle.net/jRtr3/1

//track the active editable area
var activep;

//when p is clicked place an editable text area over it
$('p').click( function () {
    activep = $(this);       
    $('<input class="editable" />')
    .appendTo('body')
    .focus()
    .val($(this).text())
    .css('top', $(this).position().top)
    .css('left', $(this).position().left)
    .width($(this).width())
    .height($(this).height() + 20);
});

//when exiting editable text area, replace its corresponding p tag with new value
$('.editable').live('blur', function () {
    $(activep).text($(this).val());
    $(this).remove();
});