Cara Menyoroti Teks Setelah Pengguna Klik

Beberapa konten di situs web dimaksudkan untuk disalin oleh pengguna, seperti alamat URL, kunci API yang dibuat secara otomatis, atau beberapa baris kode (snippet). Tetapi menyalin konten ini bisa menjadi tantangan, terutama bagi pengguna yang menggunakan trackpad atau mouse jelek. Jadi mari kita buat lebih mudah bagi mereka.

Jika Anda menemukan situs web seperti TheNextWeb, Anda akan menemukan bahwa URL tautan pendek disorot ketika Anda mengkliknya. Mari kita periksa bagaimana ini dilakukan.

Mulai

Untuk mulai dengan, kami lay out HTML yang membungkus URL shortlink.

 
 Tautan pendek 
  http://goo.gl/9JEpOz 
 
 

Kami memiliki URL yang terbungkus a menjangkau elemen bersama dengan ikon dari Ionicon. Gaya elemen-elemen ini sepenuhnya terserah Anda, karena akan tergantung pada tata letak situs web Anda. Tapi, untuk keperluan demo ini, saya gaya dengan cara ini:

Sederhana, biru dan persegi (ambil kode gaya di sini).

JavaScript

Dan inilah daging kodenya, JavaScript. Rencananya di sini adalah untuk sorot URL ketika pengguna mengkliknya.

Kami mulai kode dengan variabel yang memilih elemen di mana pengguna akan mengklik.

 var target = document.querySelector ('. shortlink'); 

Itu kueriSelektor adalah metode JavaScript untuk memilih elemen; ini pada dasarnya berfungsi seperti konstruktor jQuery $ (). Anda bisa menggunakan notasi titik untuk mendapatkan elemen oleh kelas atau # notasi untuk mendapatkan elemen dengan ID.

Selanjutnya, kita perlu membuat fungsi JavaScript baru.

 pemilihan fungsi (elem)  

Kami menamai fungsi kami sebagai pilihan(). Dan seperti yang Anda lihat di atas, fungsi tersebut membutuhkan parameter untuk meneruskan elemen yang membungkus URL atau teks biasa yang ingin kami sorot. Dalam kasus kami, ini akan menjadi menjangkau elemen dengan shortlink__url kelas.

Dalam fungsi ini, kami menambahkan beberapa variabel lagi:

 var target = document.querySelector ('. shortlink'); pemilihan fungsi (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Pertama, elem variabel memilih elemen yang kita melewati parameter fungsi. Variabel kedua, memilih, menjalankan fungsi JavaScript asli untuk mendapatkan pilihan teks. Variabel terakhir, jarak mengontrol rentang pemilihan; kami ingin memastikan bahwa pemilihan hanya di dalam elemen yang dipilih.

Selanjutnya, kami memadukan variabel-variabel ini dengan beberapa fungsi JavaScript lainnya sebagai berikut:

 var target = document.querySelector ('. shortlink'); pemilihan fungsi (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (range);  

Penambahan pertama, range.selectNodeContents (elem), mendefinisikan rentang pemilihan yang dalam hal ini adalah elemen sebagaimana dimaksud dalam elem. Baris terakhir, select.addRange (range) membuat pilihan terbatas pada rentang yang ditentukan.

Besar! Kita semua siap dengan fungsinya. Mari kita mulai beraksi.

Menjalankannya

Kami mengikat elemen target dengan klik peristiwa. Ketika elemen diklik, kita menjalankan fungsi yang baru saja kita buat dan meneruskan parameter dengan nama kelas elemen tempat URL dibungkus; dalam hal ini .shortlink__url.

 target.onclick = function () selection ('. shortlink__url'); ; 

Kita sudah selesai. Seperti yang disebutkan sebelumnya, Anda juga dapat melakukannya untuk jenis konten lain di situs web Anda yang mungkin ingin pengguna Anda salin dengan lebih mudah.

Beberapa dari Anda mungkin bertanya-tanya apakah kami bisa secara otomatis salinan, alih-alih hanya menyoroti, shorturl pada pengguna klik. Meskipun ini mungkin tampak seperti ide yang sangat bagus, sayangnya itu tidak cukup mudah untuk dicapai dan dapat menyebabkan pengalaman pengguna yang buruk. Tindakan salin harus sepenuhnya di bawah persetujuan pengguna.

Langkah-langkah dalam posting ini hanya membawanya ke tindakan puncak. Apakah pengguna kami akan menyalinnya atau tidak sepenuhnya tergantung pada mereka.

Anda dapat mengikuti tautan berikut untuk melihat demo atau mengunduh kode sumber.

• Lihat Demo
• Sumber Unduhan