能够在单击时编辑 的文本并更改原始值答案

【问题标题】：Be able to edit the text of a on click and change the original value能够在单击时编辑 的文本并更改原始值
【发布时间】：2011-11-15 19:08:09
【问题描述】：

有没有办法可以在单击  元素时编辑文本，例如单击时将其设为文本输入，我可以自行管理，但希望想知道一个简单易行的方法。

但是，困难的部分是我希望它在您按下回车键或点击退出文本输入时更改实际的 内容。

谢谢，我已经尽力解释清楚了。

【问题讨论】：

你想如何编辑它？到位，在弹出对话框中？
你可能想看看使用类似的插件：appelsiini.net/projects/jeditable

标签： jquery html textinput

【解决方案1】：

如果你想使用 HTML5 可以添加属性 contenteditable="true"

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

【讨论】：

哦，太棒了！你甚至可以通过 ctrl-i/b/etc 来改变字体样式。
是的，contenteditable 允许使用富文本区域，但要小心，因为它只与最近的浏览器兼容
无论如何，支持似乎相当不错，至少根据以下来源：caniuse.com/contenteditable

【解决方案2】：

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

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

【讨论】：

【解决方案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();
});

【讨论】：

V2 - 进行了更新以使用文本区域而不是输入。删除而不是隐藏旧元素。使光标出现在文本区域的末尾而不是开头。