Cara Tekan Teks Sorotan Auto Selepas Klik Pengguna

Beberapa keping kandungan di laman web bertujuan untuk disalin oleh pengguna, seperti alamat URL, kunci API yang dihasilkan secara automatik, atau beberapa baris kod (coretan). Tetapi menyalin kandungan ini boleh menjadi satu cabaran, terutama bagi pengguna yang menggunakan jejak trek atau tetikus jelek. Jadi mari kita buat lebih mudah untuk mereka.

Jika anda telah tersandung ke laman web seperti TheNextWeb, anda akan mendapati bahawa URL shortlink disorot apabila anda mengklik padanya. Mari lihat bagaimana ini dilakukan.

Bermula

Untuk bermula, kami meletakkan HTML yang membungkus URL shortlink.

 
 Shortlink 
  http://goo.gl/9JEpOz 
 
 

Kami mempunyai URL yang dibungkus dalam a span elemen berserta ikon dari Ionicon. Gaya elemen ini sepenuhnya terpulang kepada anda, kerana ia bergantung pada susunatur laman web anda. Tetapi, untuk tujuan demo ini, saya menyusunnya dengan cara ini:

Ia mudah, biru dan persegi (ambil kod gaya di sini).

JavaScript

Dan inilah daging kod, JavaScript. Rancangan di sini adalah untuk sorot URL sebagai pengguna klik padanya.

Kami memulakan kod dengan pemboleh ubah yang memilih elemen yang akan diklik oleh pengguna.

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

The querySelector adalah kaedah JavaScript untuk memilih elemen; ia pada asasnya berfungsi seperti pembina jQuery $ (). Anda boleh menggunakan notasi titik untuk mendapatkan elemen oleh kelas atau # notasi untuk mendapatkan unsur oleh ID.

Seterusnya, kita perlu membuat fungsi JavaScript baru.

 pemilihan fungsi (elem)  

Kami namakan fungsi kami sebagai pemilihan (). Dan seperti yang anda lihat di atas, fungsi ini memerlukan parameter untuk melepasi elemen yang membungkus URL atau mana-mana teks biasa yang ingin kami sorot. Dalam kes kita, ini akan menjadi span elemen dengan shortlink__url kelas.

Dalam fungsi ini, kami menambah beberapa lagi pembolehubah:

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

Pertama, elem pemboleh ubah memilih elemen yang kita lalui melalui parameter fungsi. Pembolehubah kedua, pilih, menjalankan fungsi JavaScript asal untuk mendapatkan pemilihan teks. Pembolehubah terakhir, pelbagai mengawal pelbagai pemilihan; kami ingin memastikan pemilihan hanya dalam elemen yang dipilih.

Seterusnya, kita rantai pembolehubah ini dengan beberapa fungsi JavaScript yang lain seperti 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 (julat);  

Penambahan pertama, range.selectNodeContents (elem), mentakrifkan pelbagai pemilihan yang dalam kes ini adalah unsur yang dirujuk di dalam elem. Baris terakhir, select.addRange (julat) membuat pilihan terhad kepada julat yang ditetapkan.

Hebat! Kita semua ditetapkan dengan fungsi ini. Mari kita buat tindakan.

Jalankannya

Kami mengikat elemen target dengan onclick acara. Apabila elemen diklik, kami menjalankan fungsi yang baru kami buat dan lulus parameter dengan nama kelas elemen di mana URL dibungkus; dalam kes ini ia .shortlink__url.

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

Kita Sudah Selesai. Seperti yang dinyatakan sebelum ini, anda juga boleh berbuat demikian untuk jenis kandungan lain di tapak web anda yang anda mungkin mahu pengguna anda menyalin lebih mudah.

Ada di antara kamu mungkin tertanya-tanya jika kita boleh secara automatik salinan, bukannya hanya menyerlahkan, shorturl pada klik pengguna. Walaupun ini mungkin kelihatan seperti idea yang benar-benar baik, malangnya ia tidak mudah dicapai dan boleh menyebabkan pengalaman pengguna yang tidak baik. Tindakan salin harus sepenuhnya di bawah persetujuan pengguna.

Langkah-langkah dalam jawatan ini hanya mengambil tindakan keupayaan. Sama ada pengguna kami akan menyalin atau tidak sepenuhnya kepada mereka.

Anda boleh mengikuti pautan berikut untuk melihat demo atau memuat turun kod sumber.

• Lihat Demo
• Muat turun Sumber