Question

我创建了一个小管理面板，用于为我的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>

现在，这确实起作用，当我点击文本时，它确实转换为textarea。问题是它没有给它“编辑”名称所以当我点击sumbit按钮时，就好像我没有提交任何东西而且它删除了表格中的所有数据，因为

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

技术上是空的。是否有任何方法可以实现这一点，当我点击文本时，它会将代码转换为具有该特定名称的textarea，以便在我点击提交时有实际数据？

Answer 1

将表单更改为：

<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）只会确保换行得到兑现。

Answer 2

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

http://jsfiddle.net/H5aM4/检查textarea

Answer 3

尝试这个

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

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

});

Here is the working example

使用特定的“name”属性将DIV转换为textarea

3 个答案: