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

Question

当你点击<p>元素时，有没有办法编辑它的文本，比如当你点击它时，让它成为一个文本输入，我可以自己管理这个，但我想知道一个简单，容易的方法。

然而，困难的部分是，我希望它改变实际的<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

下面是我自己快速滚动的方法。它确实需要一些润色，但概念似乎不错。

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();
});