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
Chcek this out...(arahkan cursor ke dalam textarea, gerak-gerakan dengan keyboard!)
Selama AA Koben berbagi
html editor live previewand 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!
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.
<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/
Loading... |
2 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...