-3

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

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

默认情况下的外观： 

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

点击时的外观：

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

非常感谢您对此的任何帮助，蒂姆

4

3 回答 3

4

尝试这个

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。

于 2013-10-23T13:39:43.553 回答
2

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

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

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

检查这个小提琴

于 2013-10-23T14:33:24.303 回答
1

如果您只想使用 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>
于 2013-10-23T13:41:21.907 回答