javascript - 没有 .val() 的动态创建的文本区域

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

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

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

Answer 1

尝试只使用 contenteditable='true'而不是更改为文本区域。它将使 <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> 上元素。