jQuery：通过单击 div 在 textarea 中显示文本答案

【问题标题】：jQuery: by click on div show text in textareajQuery：通过单击 div 在 textarea 中显示文本
【发布时间】：2013-10-23 13:23:08
【问题描述】：

我对 JavaScript 很陌生，希望有人可以帮助我找到以下解决方案：

我有一个包含一些文本的 div 和一个 onclick 事件。当您单击 div 时，我该如何管理它会在文本区域内的 div 内显示文本，并在其上方显示一个按钮 - 类似于您如何在此页面上编辑自己的 cmets？

默认情况下的外观：

<div class="clickable" onclick="TheFunctionIamLookingFor()">Some awesome text.</div>

点击后的外观：

<button type="button" id="myBtn">BtnName</button>
<textarea id="myArea">Some awesome text.</textarea>

非常感谢您提供的任何帮助，蒂姆

【问题讨论】：

showTextarea() 是做什么的。你能显示那个代码吗？
只是 HTML 表单中的普通 div
这可能出乎意料，但也许只是可能，（不太确定如何执行此操作），但我在想您如何尝试 Google.com 或事件 JQuery API 文档事件和选择器......只是说。

标签： javascript jquery html onclick textarea

【解决方案1】：

试试这个

function youAreLookingFor() {
    var awesomeText = $(this).html();
    var $form = $(this).parent();
    $(this).remove();
    var textArea = '<button type="button" id="myBtn">BtnName</button>
                    <textarea id="myArea">'+ awesomeText +'</textarea>'
    $form.append(textArea);
}

如果您要为每个可点击链接指定不同的 myBtn 和 myArea 名称，那么您也应该为可点击的 div 指定一个 id，然后从那里开始为 textarea 和按钮创建 id。

【讨论】：

非常感谢 - 这正是我想要的。很抱歉在开始时缺少信息。

【解决方案2】：

还有另一种方法可以制作您想要的内容，即使用 HTML 属性 contententeditable=true 制作 可编辑 div。您可以使用以下语法：

<div contenteditable=true>
    contents here
</div>

这有助于在 div 中复制+粘贴图像以及文本编辑，即在文本上应用字体使用键盘快捷键等。

检查这个fiddle

【讨论】：

【解决方案3】：

如果你只想使用 javascript DOM 元素，那么

<html>
<head>

<style>
.dip
{
display:none;
}
.dip1
{
display:;
}
</style>

<script>
function TheFunctionIamLookingFor()
{
document.getElementById("myArea").className="dip1";
document.getElementById("myBtn").className="dip1";

}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<div class="clickable" onclick="TheFunctionIamLookingFor()" >Some awesome text.
<button class="dip" id="b1" type="button" id="myBtn">BtnName</button>
<textarea class="dip" id="myArea">Some awesome text.</textarea>

</body>
</html>

【讨论】：

谢谢 - 这也很有帮助！