Auto Selection Highlight Text on Tagging PRE

Menyambung artikel kemarin ah biar tuntas walau sudah sedikit usang! Sebelumnya Koben sudah berbagi membuat HTML pre tag dengan gaya paper edge effect. Sekarang gua akan bagi lagi masih seputar trick PRE yang sudah banyak dipasang oleh blogger Indonesia :D Sobat-sobat pernah melihat dong tampilan script/coded di area postingan, lalu untuk mengambil coded/script tersebut ada tulisan Klik untuk menyeleksi! Itulah yg akan gue sharing cara membuat click select text in HTML pre tag using JavaScript or jQuery. Langkah pertama sudah tentu sobat sudah harus membuat kode CSS untuk HTML pre-nya. Kalau belum bikin sekalian saja deh, biar nggak capak ;)

Kode CSS tagging PRE

pre {
  display: block;
  font-size: 14px;
  font-family: Monaco,'Courier New',Courier,Monospace;
  background-color: #f9f9f9;
  color: #060606;
  width: auto;
  padding: 0.7em 1em;
  line-height: 1.5em;
  word-wrap: normal;
  white-space: pre;
  overflow: auto;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  position: relative
}
pre:before {
  content: "Klik untuk menyeleksi!";
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  color: #f9f9f9;
  background-color: #060606;
  visibility: hidden;
}
pre:hover:before {visibility:visible}

Itu gue bikin, silahkan tambah-tambahin oleh kalian biar lebih full stylish. Setelah buat area pre giliran memasukan script buat menyeleksi teks. Script ada 2 jalan, yaitu mau memakai JavaScript ataupun jQuery.

Murni JavaScript

<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("click", function () {
    var seleksi = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    seleksi.removeAllRanges();
    seleksi.addRange(range);
  }, false);
}
</script>

Plugin jQuery

<script type='text/javascript'>
 function autoSelect(elem) {
    var selection, range;
    if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(elem);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection) { // IE
        selection = document.selection.createRange().text;
        range = document.body.createTextRange();
        range.moveToElementText(elem);
        range.select();
    }
}
$('pre').on("click", function() {
    autoSelect(this);
});
</script>

Pilih salah satu jangan dimasukin dua²nya :P Masalah penempatan script coba terlebih dahulu diatas tag </body> kalau tidak jalan baru deh coba taruh scriptnya diatas tag </head>
Ketika mosting markup HTML yg dipakai seperti berikut<pre>

-------- CODED/SCRIPT AFTER PHRASE --------

</pre>
DEMO

Semoga bermanfaat :)
Happy coding \m/