Я пытаюсь создать тестер 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. Спасибо всем, кто может помочь.
Вы также можете использовать jQuery для упрощения работы (библиотека javascript). Просто включите библиотеку jQuery в свой документ и добавьте следующий код в конец
<script>
$('#textareaId').keyup(function(){
$('#myDiv').empty().html($(this).val());
});
</script>
Хорай, понял, спасибо за ваш код, Боб. Сейчас я буду медленно разбираться в дополнительных битках. Здесь готовая страница в дистиллированной форме:
<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>