0

ユーザーがページのコンテンツが後でどのようにレンダリングされるかを確認できる HTML テスターを構築しようとしています。HTML 形式のテキストを入力するだけで済みます。Web ページ全体を作成する必要はありません。これが私がやろうとしていることです...これを単純化したので、それは私のページ全体の要点だけです:

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:350px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>

    <SCRIPT language="VBScript">
    Sub sumChar
        'removed code
    End Sub

    Sub sendData() 
        Document.body.myDiv.InnerHTML = editableText.Value
    End Sub 
    </script>
</head>
<body>
    <p align="left"><font face="arial" size="2">Edit text here:</font></p>

    <textarea name="editableText" rows="11" cols="74" onchange="sumChar" onkeydown="sumChar" onkeyup="sumChar" onpaste="sumChar" oninput="vbscript:sumChar" tabIndex=4 language="VBscript"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>

    <p align="left"><input name="Button1" type="button" value="Send Data" style="height: 40px; width: 263px; font-size: larger" tabIndex=5 OnClick="vbscript:sendData" language="VBscript"></p>

    <div id="myDiv" class="mockup">
    </div>
</body>

ページの下部にある div にレンダリングされるように、html を渡そうとしていることがわかります。出来ますか?そのままでは機能しません。明らかに私は間違っています。誰かアドバイスはありますか...そして、これをjavascriptで行う必要があることをお気軽に教えてください(Internet Explorerの制限を取り除くため)。残念ながら、私はJavaScriptの初心者です。助けてくれる人に感謝します。

4

2 に答える 2

1

jQuery を使用して単純化することもできます (javascript ライブラリ)。ドキュメントの に jQuery ライブラリを含め、次のコードを末尾に追加するだけです

<script>
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>
于 2013-10-03T14:31:03.470 に答える
1

ホーレイ、わかりました。コードをありがとう、ボブ。私はゆっくりと余分なひねくれたビットを理解します。蒸留された形で完成したページは次のとおりです。

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:250px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>
</head>

<body>
    <textarea id="textareaId" rows="11" cols="74"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>
    <div id="myDiv" class="mockup">
    </div>
</body>

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>

</html>
于 2013-10-03T19:52:01.807 に答える