将 DIV 转换为具有特定“名称”属性的文本区域答案

【问题标题】：Convert a DIV to textarea with specific "name" attribute将 DIV 转换为具有特定“名称”属性的文本区域
【发布时间】：2013-08-20 21:13:03
【问题描述】：

我创建了一个小型管理面板，用于为我的 DayZ 服务器执行简单的数据库任务。现在我想为我的网站上的新闻简介做一个简单的编辑器。新闻简介存储在我的数据库中的一个表中。我想要的是当页面加载时它只是回显数据并且看起来就像它在实时站点上一样。然后，当我点击它时，我希望它转换为：

<textarea name="edit><?php echo news; ?></textarea>

这是我当前的代码：

function divClicked() {
    var divHtml = $(this).html();
    var editableText = $("<textarea name=&quot;edit&quot; />");
    editableText.val(divHtml);
    $(this).replaceWith(editableText);
    editableText.focus();
    // setup the blur event for this new textarea
    editableText.blur(editableTextBlurred);
}

$(document).ready(function() {
    $("#editable").click(divClicked);
});

<form method="post" action="newsedit.php">
    <div id="editable"><?php echo $news; ?></div>
    <input type="submit" value="Edit News" />
</form>

现在，这确实有效，因为当我单击文本时它会转换为文本区域。问题是它没有给它“编辑”名称，所以当我点击 sumbit 按钮时，就好像我什么也没提交，它会从表中删除所有数据，因为

<textarea name="edit"></textarea>

在技术上是空的。有什么方法可以做到，所以当我点击文本时，它会将代码转换为具有该特定名称的文本区域，以便在我点击提交时有实际数据？

【问题讨论】：

标签： javascript php database textarea

【解决方案1】：

试试这个

$("#editable").click( function(){

    $(this).replaceWith(function() {
  return $("<textarea name='edit'>").text(this.innerHTML);
});

});

Here is the working example

【讨论】：

【解决方案2】：

 var editableText = $("<textarea name='edit' />");

http://jsfiddle.net/H5aM4/ 检查文本区域

【讨论】：

【解决方案3】：

将表格更改为：

<form method="post" action="newsedit.php">
    <div id="<?php echo $newsID;?>"><?php echo nl2br($news); ?></div>
    <input type="submit" value="Edit News" />
</form>

其中 $newsID 与 $news 文本一起返回。

nl2br($news) 只会确保遵守换行符。

【讨论】：