In this article I am going to explain how to see real time
preview of Html code from textarea in asp.net using jquery.
Description:
I want to display real time preview of HTML code/text entered
in text area. I am using Jquery to implement this.
Implementation:
Create a jquery Keyup function.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// preview html
$('#txtarea').keyup(function () {
var detail = $(this).val();
$('#preview').html(detail);
$("#preview").show();
});
$("#preview").hide();
});
</script>
Complete
HTML Markup of Webform:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// preview html
$('#txtarea').keyup(function () {
var title = $(this).val();
$('#preview').html(title);
$("#preview").show();
});
$("#preview").hide();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Enter Detail :</td>
<td><asp:TextBox ID="txtarea" runat="server" TextMode="MultiLine" Height="250" Width="400"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" id="preview">
</td>
</tr>
</table>
<style>
#preview {
position: relative;
width: 350px;
height: 200px;
border: 1px solid red;
overflow: auto;
}
#preview img{
width:500px;
}
</style>
</div>
</form>
</body>
</html>
Post a Comment