Result
http://jsfiddle.net/kachibito/QG3qL/5/embedded/result,js,css,html
jQuery
$.fn.textarea = function(){ function init(){ //全体をラップする var $textarea = $(this).wrap('<div class="textarea"></div>'); //要素を指定した他の要素の後に挿入 var pre = $('<pre></pre>').html($textarea.val()).insertAfter($textarea); $textarea.bind('keyup change click focus',function(e){ pre.html($textarea.val()); }); } return this.each(init); }; $('textarea').textarea();
css
.textarea{ width:200px; position:relative; font-size:12px; line-height: 1.5em; } .textarea textarea{ width:100%; min-height:100%; display:block; position:absolute; font-size:12px; line-height: 1.5em; padding: 0px; resize: none; } .textarea pre{ display:block; min-height: 50px; font-size:12px; line-height: 1.5em; padding-top:1em; white-space: pre-wrap; word-wrap: break-word; }
html
<textarea></textarea>