Javascript 动态创建的textarea，编号为.val（）

我试图允许用户编辑网站中段落的文本。我用

.replaceWith（）

函数将

标记替换为

标记。当我尝试获取

textarea

的值时，它返回空白。这是一个例子

HTML:

EditI将把它改为一个textarea字段并检索值

JS:

$（文档）.ready（函数（）{
$（'.edit'）.hide（）；
变量对象=$（'p'）；
on（“mouseenter”，function（））{
$（'.edit'）.show（）；
在（'单击'，'编辑'，函数（）上）{
var oldText=object.text（）；
oldText=oldText.substr（4）；//排除“编辑”一词
object.replace为（$（“”）.val（oldText）.css（“宽度”，object.css（'width'））.css（'height'，object.css（'height'）））；
var value=object.val（）；
警报（“值：”+值）；
});
});
});

我是一个编程初学者，所以如果你有风格或实现技巧，欢迎分享。这只是我对解决问题的本能反应；也许有一种更简单的方法来完成同样的事情

---

编辑：我还应该提到，在我的网站中，每个段落都来自一个数据库表，我正在使用AJAX函数显示该表。当用户完成编辑后，他可以点击一个按钮，网站将获取

textarea

字段的新值，并且

UPDATE*table*SET*text*=newText，其中*text*类似于旧文本
尝试只使用
contenteditable='true'
而不是更改为文本区域。它将使
可编辑

像这样：

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

编辑
我将把它改成一个textarea字段并检索值

如果您想在有人单击“编辑”时使文本区域可编辑，您可以创建一个函数，将
contenteditable
属性设置为
true
，然后将焦点放在
元素上。
您的代码没有试图获取
的值。您的电话：

object.replaceWith( ... )

不更改变量“object”的值-它仍然是
标记的jQuery对象，但在这之后，它将退出DOM<代码>

标记没有“值”属性

---

在另一个事件处理程序中设置事件处理程序（不管怎样，还是为交互事件设置事件处理程序）几乎总是一个坏主意。事件处理程序会累积，因此每个“mouseenter”事件都会添加另一个“click”处理程序。

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

$（文档）.ready（函数（）{
$（'.edit'）.hide（）；
变量对象=$（'p'）；
on（“mouseenter”，function（））{
$（'.edit'）.show（）；
在（'单击'，'编辑'，函数（）上）{
var oldText=object.text（）；
oldText=oldText.substr（4）；//排除“编辑”一词
object.replace为（$（“”）.val（oldText）.css（“宽度”，object.css（'width'））.css（'height'，object.css（'height'）））；
var值=$（“textarea”）.val（）；
警报（“值：”+值）；
});
});
});

有许多方法可以使其更加健壮，包括向textarea添加类或id，然后使用它进行选择，例如：

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

object.replacetwith（$（“”）.val（oldText）.css（“宽度”，object.css（“宽度”））.css（“高度”，object.css（“高度”））；
var值=$（“.selectMe”）.val（）；

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

$（document.ready（function（））{
函数makeTextarea（e）{
e、 预防默认值（）；
变量编辑=$（e.currentTarget）；
var parent=edit.parent（）；
edit.remove（）；
parent.replaceWith（“”+parent.text（）+“”）；
}
$（'.edit'）。在（'click'，makeTextarea'）；
});

小提琴：

---

“当文档准备就绪时，侦听单击。编辑类。单击时，存储对父元素（

）的引用，然后删除编辑元素。最后将父元素（

）替换为包含

元素内容的文本区域。”

关于

内容可编辑的问题，ckersh是绝对正确的，但如果您正在寻找代码的具体答案，则有一些地方可以改进

您的代码有几个问题。首先，每次鼠标悬停在段落上时，都要重新绑定（'click'）

处理程序，因此如果鼠标悬停5次，则执行匿名函数5次。您只需要在例程上绑定一次。其次，变量

object

永远不会更改，因此当您用textarea替换它时，您需要一个新的选择器来获取值

使用我上面提到的增强功能。我还添加了一个

mouseleave

事件，因为我想当你离开段落时，你想隐藏“编辑”按钮。更新后的javascript如下所示：

$（文档）.ready（函数（）{
$（'.edit'）.hide（）；
变量对象=$（'p'）；
on（“mouseenter”，函数（）{
$（'.edit'）.show（）；
}).on（“mouseleave”，函数（）{
$（'.edit'）.hide（）；
}).on（“单击“，”编辑“，函数（）{
var oldText=object.text（）；
oldText=oldText.substr（4）；//排除“编辑”一词
object.replace为（$（“”）.val（oldText）.css（“宽度”，object.css（'width'））.css（'height'，object.css（'height'）））；
var值=$（“textarea”）.val（）；
警报（“值：”+值）；
});
});

替换后，恐怕您的“p”对象不存在

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

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

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