Question

Here is an example:

I write html code inside of textarea, then I swap its content with one of the div elements to see live changes (jquery). Happens vise versa, from div to textarea and back. There are two textareas: one for html another for css. Textarea for css is swapped with one of the elements. Sounds funny? =)

Long story short: when it comes to the point where I need to write <textarea>...</textarea> inside of html’s textarea or write “textarea { font-style: bold; }” inside of css’s textarea – THIS CODING is getting applied to my html and css textareas creating mess on swap.

How do I make textarea ignore what is inside of it and treat all content as text?

Swapping is done this way (actually it’s much more complicated, but idea is the same):

var html = $('.content').html();
$('.editors').append("<textarea class='editorhtml' spellcheck='false'>"+html+"</textarea>"); // .editors is outside of .content

//and

$('.content').html($('.editorhtml').val());
$('.editorhtml').remove();

Wow! That was hard to explain. Are you confused?

Answer 1

You could use val()to set the content of the textarea instead of just concatenating the strings to set the current content as default value of the textarea:

var html = $('.content').html();
$("<textarea class='editorhtml' spellcheck='false'>").val(html).appendTo($('.editors'));

You’ll find an example here: http://jsfiddle.net/9SbGt/