Уметь редактировать текст <p>по клику и изменять исходное значение

Question

Есть ли возможность иметь возможность редактировать текст в элементе <p>, когда вы щелкаете по нему, например, сделать его текстовым вводом, когда вы щелкаете по нему, я могу отчасти управлять этим самостоятельно, но хотел бы знать простой и легкий способ сделать это.

Однако сложная часть заключается в том, что я хотел бы изменить фактическое содержание <p>, когда вы нажимаете ввод или щелкаете текстовый ввод.

Спасибо, я пытался объяснить это как можно лучше.

Answer 1

Если вы хотите использовать HTML5, вы можете добавить атрибут contenteditable = "true"

, если вы не хотите использовать HTML5, вот jQuery: http://jsfiddle.net/uGU6p/

Answer 2

Вот быстрый способ прокатиться самостоятельно.Это определенно требует доработки, но концепции кажутся хорошими.

Версия 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();
});

Answer 3

Вы можете использовать какой-нибудь плагин для встроенного редактирования. Я нашел это:

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