Question

我试图允许用户编辑网站中段落的文本。我使用<p>函数将<textarea>标记替换为.replaceWith()标记。当我尝试获取textarea的值时，它返回空白。这是JSfiddle。

HTML：

<p><a class="edit">Edit</a>I'm going to change this into a textarea field and retrieve the value.</p>

JS：

$(document).ready(function() {
    $('.edit').hide();
    var object = $('p');
    object.on("mouseenter", function() {
        $('.edit').show();
        object.on('click','.edit',function(){
            var oldText = object.text();
            oldText = oldText.substr(4); // Exclude the word 'Edit'
            object.replaceWith($("<textarea>").val(oldText).css("width",object.css('width')).css('height',object.css('height')));
            var value = object.val();
            alert("Value: "+value);
        });
    });
});

我是一名编程初学者，所以如果你有风格或实施技巧，请随意分享。这只是我对解决问题的直觉反应;可能有一种更简单的方法来完成同样的事情。

编辑：我还应该提到，在我的网站中，每个段落都来自我使用AJAX功能显示的数据库表。当用户完成编辑后，他可以单击按钮，网站将采用textarea字段的新值和UPDATE *table* SET *text*=newText WHERE *text* LIKE oldText;

Answer 1

尝试使用contenteditable='true'而不是更改为textarea。它会使<p>可编辑。

像这样：

<p contenteditable='true'><a class="edit">Edit</a>
  I'm going to change this into a textarea field and retrieve the value.</p>

如果您想在有人点击“编辑”时使文字区域可编辑，您可以创建一个将contenteditable属性设置为true的功能，然后将焦点放在<p>元素。

Answer 2

您的代码并未尝试获取<textarea>的值。你的电话：

object.replaceWith( ... )

不会更改变量＆＃34; object＆＃34;的值。 - 它仍然是<p>标签的jQuery对象，但之后它已经脱离了DOM。 <p>标记没有＆＃34;值＆＃34;属性。

在另一个事件处理程序中设置事件处理程序几乎总是一个坏主意（好吧，无论如何都是交互事件的事件处理程序）。事件处理程序累积，因此每个＆＃34; mouseenter＆＃34;事件将添加另一个＆＃34;点击＆＃34;处理程序。

Answer 3

ckersch关于使用contenteditable的更简单方法是正确的，但如果您正在寻找针对特定问题的解决方案，请更改您的选择器：

var value = object.val();

对此：

var value = $("textarea").val();

完整代码：

$(document).ready(function() {
    $('.edit').hide();
    var object = $('p');
    object.on("mouseenter", function() {
        $('.edit').show();
        object.on('click','.edit',function(){
            var oldText = object.text();
            oldText = oldText.substr(4); // Exclude the word 'Edit'
            object.replaceWith($("<textarea>").val(oldText).css("width",object.css('width')).css('height',object.css('height')));
            var value = $("textarea").val();
            alert("Value: "+value);
        });
    });
});

Fiddle

有很多方法可以让它更健壮，包括在textarea中添加一个类或id，然后使用它来选择，例如：

object.replaceWith($("<textarea class='selectMe'>").val(oldText).css("width",object.css('width')).css('height',object.css('height')));
var value = $(".selectMe").val();

Answer 4

您使用的方法replaceWith（）错误。参数必须是字符串或返回字符串的函数，而不是jquery选择器。此外，您应该将onclick事件放在mouseenter事件之外（这对任何事件都有效，永远不会嵌套它们）

Answer 5

$(document).ready(function() {
    function makeTextarea(e) {
        e.preventDefault();

        var edit = $(e.currentTarget);
        var parent = edit.parent();
        edit.remove();

        parent.replaceWith('<textarea>' + parent.text() + '</textarea>');
    }

    $('.edit').on('click', makeTextarea);
});

小提琴：http://jsfiddle.net/U57v2/4/

“当文档准备就绪时，请监听.edit类的点击。点击时，存储对父元素（<p>）的引用，然后删除编辑元素。最后替换父元素（{{1} }）带有带<p>元素内容的textarea。“

Answer 6

ckersh关于contenteditable是绝对正确的，但是如果您正在寻找代码的具体答案，那么您可以改进一些事项。

您的代码存在一些问题。首先，每次将鼠标悬停在段落上时，都会重新绑定on('click')处理程序，因此如果鼠标超过5次，则执行匿名函数5次。您只需要绑定一次on例程。其次，变量object永远不会改变，所以当你用textarea替换它时，你需要一个新的选择器来获取值。

I've updated your fiddle以及我上面提到的增强功能。我还添加了一个mouseleave事件，因为我想要在您离开段落时隐藏“编辑”按钮。更新的JavaScript可以在下面看到：

$(document).ready(function () {
    $('.edit').hide();
    var object = $('p');

    object.on("mouseenter", function () {
        $('.edit').show();
    }).on("mouseleave", function () {
        $('.edit').hide();
    }).on("click", '.edit', function () {
        var oldText = object.text();
        oldText = oldText.substr(4); // Exclude the word 'Edit'
        object.replaceWith($("<textarea>").val(oldText).css("width", object.css('width')).css('height', object.css('height')));
        var value = $("textarea").val();
        alert("Value: " + value);
    });
});

动态创建没有.val（）的textarea

6 个答案: