Friday, August 25, 2017

Real time preview of Html code textarea in asp.net using jquery

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>


No comments:

Post a Comment