Kullanıcı Tıkladığında Metni Otomatik Olarak Vurgulama

Web sitelerinde bulunan bazı içeriklerin, URL adresi, otomatik olarak oluşturulan bir API anahtarı veya birkaç kod satırı (parçacık) gibi kullanıcılar tarafından kopyalanması amaçlanmıştır. Ancak bu içerikleri kopyalamak, özellikle de bir trackpad veya boktan bir fare kullanan kullanıcılar için zor olabilir. Öyleyse onlar için işi daha kolaylaştıralım.

TheNextWeb gibi web sitelerine tökezlediyseniz, tıkladığınızda kısa link URL’nin vurgulandığını göreceksiniz. Bunun nasıl yapıldığını kontrol edelim.

Başlamak

Başlangıç ​​olarak, kısa bağlantı URL'sini saran HTML’yi düzenleriz..

 
 Kısa bağlantı 
  http://goo.gl/9JEpOz 
 
 

URL’yi bir karış Ionicon dan bir simge ile birlikte eleman. Bu öğelerin tarzı, tamamen web sitenizin düzenine bağlı olarak size bağlıdır. Ancak, bu demonun amacı için, şu şekilde biçimlendiririm:

Basit, mavi ve kare basittir (burada stil kodlarını alın).

JavaScript

Ve işte kodun eti, JavaScript. Buradaki plan kullanıcılar tıkladığında URL’yi vurgulayın.

Koda, kullanıcının tıklayacağı öğeyi seçen bir değişkenle başlıyoruz.

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

querySelector elemanı seçmek için bir JavaScript yöntemidir; temelde jQuery yapıcısı gibi çalışır $ (). Elemanı sınıfa göre almak için nokta gösterimini kullanabilirsiniz. # Kimlik tarafından bir öğe almak için gösterim.

Ardından, yeni bir JavaScript işlevi oluşturmamız gerekiyor.

 işlev seçimi (elem)  

Fonksiyonumuzu şöyle adlandırırız: seçimi (). Yukarıda da görebileceğiniz gibi, işlev URL'yi saran öğeyi veya vurgulamak istediğimiz normal metinleri iletmek için bir parametre gerektirir. Bizim durumumuzda, bu olurdu karış ile eleman shortlink__url sınıf.

Bu fonksiyona birkaç değişken daha ekledik:

 var target = document.querySelector ('. shortlink'); işlev seçimi (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

İlk önce elem değişkeni, işlev parametresinden geçirdiğimiz öğeyi seçer. İkinci değişken, seçmek, metin seçimini almak için yerel bir JavaScript işlevi çalıştırır. Son değişken, menzil seçim aralığını kontrol eder; seçimin yalnızca seçilen öğenin içinde olmasını sağlamak istiyoruz.

Daha sonra, bu değişkenleri birkaç JavaScript işleviyle zincirleyelim:

 var target = document.querySelector ('. shortlink'); işlev seçimi (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (aralık);  

İlk ekleme, range.selectNodeContents (elem), tanımlar seçim aralığı ki bu durumda elem. Son satır, select.addRange (aralık) seçimi belirtilen aralıkla sınırlandırır.

Harika! Hepimiz fonksiyonu ile ayarlanmıştır. Hadi harekete geçelim.

Çalıştır

Hedef elemanı bir tıklamada Etkinlik. Öğe tıklandığında, yaptığımız işlevi çalıştırır ve parametreyi URL'nin sarıldığı öğenin sınıf adıyla iletiriz; bu durumda .shortlink__url.

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

İşimiz bitti. Daha önce de belirtildiği gibi, web sitenizdeki kullanıcıların daha kolay kopyalamasını isteyebileceğiniz diğer içerik türleri için de yapabilirsiniz..

Bazılarınız otomatik olarak yapabilir miyiz diye merak ediyor olabilirsiniz. kopya, sadece vurgulamak yerine, kullanıcı tıklaması üzerine kısa. Bu gerçekten iyi bir fikir gibi görünse de, maalesef elde edilmesi pek kolay değil ve kullanıcı deneyiminin kötüleşmesine neden olabilir. Kopyalama işlemi tamamen kullanıcının rızası altında olmalıdır..

Bu gönderideki adımlar, yalnızca vurgu işlemine gider. Kullanıcılarımızın kopyalayıp kopyalamaması tamamen onlara bağlıdır..

Demoyu görmek veya kaynak kodunu indirmek için aşağıdaki bağlantıları takip edebilirsiniz..

• Demoyu Gör
• Kaynak İndir