Teks Box Blogger Sederhana - Textarea

Tampilan Text Box

Tampilan Text Box (textarea) yang akan kita buat nanti akan seperti ini.

↖️ [ TEXT BOX / TEXT AREA ] [ Ujung Teks ]

Yang pertama yaitu box saat berisi teks yang panjang dan banyak, tampilannya bisa di gulir ( scroll ) bisa juga di perluas tampilannya dengan meng-klik expand icon yang ada di pojok kiri atas box. dan yang kedua yaitu saat box berisi lebih sedikit teks. Nah untuk membuatnya cukup mudah, jadi langsung saja buka edit html kemudian masukkan style css berikut ini tepat di atas  ]]></b:skin> Lihat gambar berikut sebagai patokan ➜

CSS (style)

.tomteks { color:#fff; cursor:pointer; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; display:flex; align-items:center; justify-content:center; width:25px; height:25px; margin-top:0px; margin-left:0px; position: absolute; padding:1px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; } #teksAr textarea{ width:93%; padding:10px 15px 0px 15px; background-color:#000000; color:#daa520; border:0; vertical-align:top; outline:none; font-family: courier , italic; } #teksAr::-webkit-scrollbar{width: 5px;} #teksAr::-webkit-scrollbar-track{box-shadow: inset 0 0 1px #999;border-radius: 5px;} #teksAr::-webkit-scrollbar-thumb {background:#daa520;border-radius:5px;}

Kemudian Simpan juga javascript berikut ini di atas kode </body>.

JavaScript

<script> $(window).on('load', function() { if($('#teksAr').height() > 130) { $('.tomteks').css('display','flex'); } }) </script>

JavaScript di atas merupakan scrip pemanggil tombol expand dan akan bekerja ketika box di isi dengan teks yang panjang hingga box akan melebihi batas ketinggiannya yaitu 130px, tapi jika ketinggian box kurang dari itu tombol expand tidak akan muncul. maka jika menurut kamu ini tidak penting lebih baik lewati saja javascript di atas.

Selanjutnya JavaScript berikut ini kamu pasang juga tepat di atas </body> seperti JavaScript di atas.

&lt;script type=&quot;text/javascript&quot;&gt; const tx = document.getElementsByTagName(&quot;textarea&quot;); for (let i = 0; i &lt; tx.length; i++) {   tx[i].setAttribute(&quot;style&quot;, &quot;height:&quot; + (tx[i].scrollHeight) + &quot;px;overflow-y:hidden;&quot;);   tx[i].addEventListener(&quot;input&quot;, OnInput, false); } function OnInput() {   this.style.height = 0;   this.style.height = (this.scrollHeight) + &quot;px&quot;; } &lt;/script&gt;

Skrip di atas berfungsi untuk membuat membuat textarea jadi fleksibel atau mengikuti tinggi dari box seperti pada elemen div yang diberikan style height / width auto. tempelkan skrip di atas apa adanaya pada bagian yang sudah saya sebutkan di atas tadi. seperti gambar berikut ➜

Masih sama dengan JavaScript sebelumnya, kamu simpan juga skrip berikut ini yang berfungsi untuk event pada tombol expand yaitu mengubah ukuran box ke ukuran otomatis mengikuti panjang dari teks sehingga teks akan terlihat seluruhnya dan selain itu, Skrip ini juga berfungsi untuk mengubah icon expand menjadi icon compress.

<script> $(document).ready(function(){ $(".tomteks").click(function(){ $(".tomteks").toggleClass("fa-expand fa-compress") $("#teksAr").toggleClass("persempit perluas") }); }); </script>

Selanjutnya pasang kode berikut ini di postingan kamu dalam mode html - Lihat gambar ➜

HTML

<div id='teksAr' class='persempit'><div id='tomTeks' class='tomteks fa fa-expand'></div><textarea readonly="">TEXTHERE</textarea></div>

Kamu bisa hapus div pembuka dengan id tomTeks sampai div penutupnya jika tidak ingin menyertakan tombol expand didalam box, dan untuk memasukan teks nya kamu bisa ubah tulisan TEXTHERE menjadi tulisan yang ingin kamu masukan kedalam Box Text.

<div id='teksAr' class='persempit'><div id='tomTeks' class='tomteks fa fa-expand'></div><textarea readonly="">TEXTHERE</textarea></div>

Demikian artikel kali ini tentang cara membuat Text Box Area ( textarea ) pada postingan blogger.