Textarea image

JavaScript Sistem Klik Dan Hover Pada Text Area - Text Area merupakan media tempat untuk menyisipkan atau menyimpan serangkaian kode-kode HTML dalam bentuk perintah teks, sehingga saat Anda hendak menuliskan serangkaian beberapa perintah kode dalam bentuk HTML pada postingan, maka jika dalam text area kode tersebut akan menjadi tulisan dalam bentuk format teks biasa.
Sebagai contoh -

<div class="sahabatblogger77">
   <div class="sb77-textarea-format" id="media-text">
       <h3>
         <p style="text-align:center;padding:10px 8px;color:#ccc;">
Tutorial cara meng-aktifkan fungsi onclick dan onfocus-hover pada textarea dengan sistem perintah javaScript
          </p>
       </h3>
    </div>
</div>


Sekarang coba Anda tuliskan bentuk serangkaian kode diatas dalam mode HTML pada postingan Anda, lalu lihat format tulisan Anda dalam mode COMPOSE, maka semua serangkaian kode HTML diatas tidak akan ditampilkan di postingan Anda. Namun jika Anda menyimpannya dalam text area, maka semua kode tersebut akan ditampilkan dalam bentuk format tulisan biasa. Untuk fungsi kode-kode perintah pada text area, dipertemuan sebelumnya saya sudah pernah membahas tentang Cara Membuat Format Tulisan Dengan Text Area. Postingan kali ini saya akan berbagi tentang perintah JavaScript Dengan Sistem Klik Dan Hover Pada Text Area.




DEMO SHOW




SISTEM KLIK
Text area dengan sistem ini untuk memudahkan pengunjung saat akan meng-copy keseluruhan teks tulisan dalam wilayah text area dengan sistem KLIK, singkatnya format block tulisan akan digantikan dengan perintah klik (klik tulisan, maka keseluruhan tulisan akan ter-block), sehingga kita tidak ragu/takut lagi jika kemingkinan ada beberapa teks yang tertinggal saat di block


<textarea rows="5" cols="35" onclick="javascript:this.focus();this.select();" readonly="readonly">

...Tulis Teks Anda Disini...

</textarea>



SISTEM HOVER
Fungsi pada sistem ini bekerja dengan perintah HOVER MOUSE, jika pada sistem yang pertama mem-block teks dengan perintah KLIK, pada sistem ini dengan perintah hover, cukup mengarahkan PANAH MOUSE pada wilayah text area, maka seluruh tulisan akan ter-block

<textarea rows="5" cols="35" onmouseover="javascript:this.focus();this.select();" readonly="readonly">

...Tulis Teks Anda Disini...

</textarea>


Pada dasarnya penggunaan text area seperti ini hanya berlaku jika blog Anda membahas postingan tentang kode-kode perintah seperti HTML, CSS, JavaScript, jQuery dan lainya sebagainya, namun jika postingan di blog Anda dominan share tentang tulisan cerita atau sekedar informasi dan hal-hal menarik lainnya, Anda boleh memperindah postingan anda dengan Membuat Panel Slide Untuk Menyimpan Text.

Akhir kata saya ucapkan Terimakasih dan semoga inspirasi ini dapat memberikan ilmu tambahan buat rekan-rekan semua pecinta SAHABAT BLOGGER 77. And next time saya akan memberikan cerita-cerita menarik di lain kesempatan.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= JavaScript Sistem Klik Dan Hover Pada Text Area
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

6 komentar

  1. Oh... gitu ya caranya bikin sistem klik dan sistem hover pada text area. Info yang sangat bermanfaat Mbak.

    BalasHapus
  2. sangat bermanfaat mba postingannya pengetahuan penting untuk blogger krn utk mayoritas blog penggunaan text area adalah salah 1 yg penting...:)

    BalasHapus
  3. pas skali..sayang..!, tdk berfungsi di template..jdinya.. [-(

    BalasHapus
  4. menarik dan berkelas semoga sukses selalu ,salam kenal aja untuk adminya

    BalasHapus
  5. ternyata hanya merubah perintah kodenya saja ya mbak, terima kasih (h)

    BalasHapus
  6. wah kren saya borkmark dulu, mantap

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK