Framework Textarea for Create a Simple Live Preview

Masih ingatkah kalian dengan artikel HTML editor simplest? Sebenarnya jika ingin membuat sebuah fitur live preview, harus ada 1 property utama antara lain textarea atau iframe. Salah satu penggunaan dari properti tersebut kalian sudah bisa membuat sebuah apps live preview.
Selama AA Koben berbagi html editor live preview and melihat-lihat kode/script pembangun pasti ada iframe/textarea. Ke dua pilar itu memang banyak manfaatnya kalau ditelaah lebih dalam ;)
Chcek this out...(arahkan cursor ke dalam textarea, gerak-gerakan dengan keyboard!)

<textarea name="BebenKoben" id="bView" placeholder="Add coded here..." style="width:100%;height:100px"></textarea>

<div id="prevBbn"></div>

<script type='text/javascript'>
var txtarP = document.getElementById('bView');
txtarP.onkeyup = txtarP.onkeypress = function(){
    document.getElementById('prevBbn').innerHTML = this.value;
}
</script>

Dengan begitu saja sudah bisa membuat live preview?

Kode & script itu masih bisa kita minimalis lagi dengan teknik onkeyup Event!

<a href="http://beben-koben.blogspot.com">Beben Koben</a><br /><a href="http://ben-tools.blogspot.com">Ben Tools</a><br /><a href="http://undercover-blogger.blogspot.com">Undercover Blogger</a>

<textarea name="BebenKoben" id="bView" placeholder="Add comments:" onkeyup="document.getElementById('prevBbn').innerHTML = this.value"></textarea>

<div id="prevBbn"></div>

Metode lain bisa juga dengan begini!

<div id="Bbn1"></div>

<textarea id="Bbn2" onkeyup="viewHTML ()" name="BebenKoben" style="width:100%;height:100px"></textarea>

<script type="text/javascript">
  function viewHTML () { viewHtml1 = document.getElementById('Bbn1'); viewHtml1.innerHTML = document.getElementById('Bbn2').value ;}
</script>

Belum lagi penambahan properti form you can make it!

Sesederhana kode bisa menjadi sepaktakuler jika sedikit sentuhan kreatifitas bermain dengan indahnya :D

Demikian informasi textarea framework. Silahkan sobat kembangkan kode/script di atas untuk apaan. Satu yang pasti pesan AA, jangan hilang kreatifitas.

Happy coding \m/