-3

私はJavaScriptにかなり慣れていないので、誰かが次の解決策を見つけるのを手伝ってくれることを願っています:

テキストを含む div と onclick イベントがあります。div をクリックすると、div 内のテキストが textarea 内に表示され、その上にボタンが表示されるようにするには、どうすればよいですか?

デフォルトでどのように見えるか： 

<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 を指定し、そこから始めてテキストエリアとボタンの ID を作成する必要があります。

于 2013-10-23T13:39:43.553 に答える
2

必要なものを作成する別の方法があります。つまり、HTML プロパティを使用して編集可能なdiv を作成しますcontententeditable=true。次の構文を使用できます。

<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 に答える