Real time preview of Html code textarea in asp.net using jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon