In this article I am going to discuss with reader how to see live preview content with jquery. Here I am using keyup element to show live content within a div. Few line of Javascript code is need to write for live preview of content using jquery library. Let us see in detail.
You can see the demo
Demo
HTML
<center> <input type=-"text" name="keyword" id="keyword" placeholder="Enter text for live preview"> <div id="result">See Live content Here</div> <center>
CSS
#keyword
{
width: 250px;
height: 35px;
border-radius: 5px;
border-color: brown;
margin-top: 50px;
}
#result
{
width: 250px;
height: 70px;
border-radius: 5px;
border-color: blue;
margin-top: 98px;
border: 1px solid black;
}
JAVASCRIPT
Keyword is ID of input text box and getting its value in a variable “key”.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#keyword').keyup(function(){
var key = $('#keyword').val();
$('#result').html(key);
});
});
</script>
As you can see above code that keyup element is used to live check user has key up or not and get that result in div which have id(result).That’s all.