如何使用用戶輸入的HTML字符串和頁面上的呈現

我想構建一個HTML測試器，允許用戶檢查他/她的頁面內容將在以後如何呈現。他們所要做的就是用html格式輸入文本 - 他們不需要建立整個網頁。這裏就是我到...我已經簡化了這一所以它只是我的整個頁面的最基本的要素：如何使用用戶輸入的HTML字符串和頁面上的呈現

<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>

你可以看到我試圖通過HTML，以便呈現在頁面底部的div中。可能嗎？它不能正常工作，顯然我錯了。有沒有人有任何建議...並隨時告訴我，我應該這樣做的JavaScript（爲了消除Internet Explorer的限制）。儘管不幸的是，我更喜歡使用javascript的新手。感謝任何能夠幫助的人。

來源

2013-10-03 David

** VBScript不應該用於客戶端腳本**。只有IE支持它。使用JavaScript來做到這一點。 – Moob

你也可以使用jQuery來簡化事情（JavaScript庫）。只包含在文檔的jQuery庫和下面的代碼添加至底部

<script> 
    $('#textareaId').keyup(function(){ 
     $('#myDiv').empty().html($(this).val()); 
    }); 
</script>

來源

2013-10-03 14:31:03

謝謝..我喜歡這種聲音 - 它看起來像keyup意味着它觸發與每個按鍵，所以div會不斷更新？那簡直太好了。我正在努力讓它工作......我已經下載了jQuery，並在我的

Horay，知道了，謝謝你的代碼，鮑勃。我現在會慢慢弄清楚額外的瑣事。以下是以蒸餾形式完成的頁面：

<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-03 19:52:01 David

相關問題

如何使用用戶輸入的HTML字符串和頁面上的呈現

回答

相關問題