Live preview and HTML

Question

Well I have the live preview of text going using jQuery.

http://jsbin.com/ezuta4

But is there a way where I can put in HTML tags and the HTML won't show but effects the text? Like typing <h1> and the tags turn into headings?

So far:

   $(document).ready(function(){

  $('#text').keypress(function() {
  $('#live').text($(this).val());
  });
}); // end jQuery 
​

Answer 1

text() will parse anything you enter as literal characters. To allow HTML code, use

  $('#live').html($(this).val());

http://jsbin.com/ezuta4/2

Answer 2

Use .html() instead of .text() . This won't escape what you type. Also use .keyup() instead of .keypress() , or else the last character you press won't show until you press something else, the event will happen before the character is rendered.

$('#text').keyup(function() {
    $('#live').html($(this).val());
});

jQuery reference

• .html
• .text
• keyup
• keypress

Answer 3

使用.html（）而不是.text（）