Live preview using jQuery

In this post i want to explain Live preview with jQuery.This is very simple jQuery function.the keyup() is used to this example.

Syntax

$(selector).keyup()

Live DemoDownload Script

Before that we need to include jQuery Library file.Copy and Paste the following URL.
Library File:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

jQuery Function

 <script type="text/javascript">
        $(function()
        {
            $(".url").keyup(function()
            {
                $(".url_preview").text($(this).val()); //Get typed values and display values
            });
    });
</script>

the text() function will change the (text) value of the specified element, but keep the html structure.

HTML File

 <input type="text" name="url"  class="url" />
          <span class="url_preview" style="color:#0099FF"></span>

Please share your comments and feedback.Thanks.Please subscribe my updates via email.