Hogyan jelölje ki a felhasználó által kijelölt szöveg automatikus kiemelését

A weboldalak bizonyos tartalmát a felhasználók másolják, például egy URL-címet, egy automatikusan létrehozott API-kulcsot, vagy néhány kódsorot (részleteket). Ezeknek a tartalmaknak a másolása azonban kihívást jelenthet, különösen azok számára, akik trackpadot vagy crappy egeret használnak. Tehát megkönnyítsük nekik.

Ha megbotlott az olyan weboldalakra, mint a TheNextWeb, akkor azt találja, hogy a rövid hivatkozás URL-je kiemelve jelenik meg, amikor rákattint. Nézzük meg, hogyan történik ez.

Elkezdeni

Először is elhelyezzük azt a HTML-t, amely a rövid hivatkozási URL-t csomagolja.

 
 shortlink 
  http://goo.gl/9JEpOz 
 
 

Az URL-t a arasz az Ioniconból származó ikon mellett. Ezeknek az elemeknek a stílusa teljes mértékben rajtad múlik, mivel a webhely elrendezésétől függ. De ennek a demónak a céljára úgy tervezem, hogy:

Egyszerű, kék és négyzet alakú (ragadja meg a stíluskódokat).

A JavaScript

És itt van a kód, a JavaScript. A terv itt van jelölje ki az URL-t, ahogy a felhasználók rákattintanak rá.

A kódot olyan változóval kezdjük, amely kiválasztja azt a elemet, amelyben a felhasználó rákattint.

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

A querySelector egy JavaScript-módszer az elem kiválasztásához; alapvetően úgy működik, mint a jQuery konstruktor $ (). A pont jelölés segítségével az elemet az osztály vagy az # jelölés, hogy elemet kapjon az azonosítóval.

Ezután új JavaScript-funkciót kell létrehoznunk.

 függvény kiválasztása (elem)  

Mi a funkciónk neve kiválasztás(). Amint fentebb láthatod, a függvénynek paraméterre van szüksége ahhoz, hogy átmásolja az URL-t becsomagoló elemet, vagy bármely más, a kiemelni kívánt szöveges szöveget. Esetünkben ez lenne az arasz elem a shortlink__url osztály.

Ezen funkción belül pár további változót adunk hozzá:

 var target = document.querySelector ('. shortlink'); függvényválasztás (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange ();  

Először is elem A változó kiválasztja azt a elemet, amelyet átmegyünk a függvény paraméterén. A második változó, választ, natív JavaScript funkciót futtat a szöveg kiválasztásához. Az utolsó változó, hatótávolság szabályozza a kiválasztási tartományt; szeretnénk biztosítani, hogy a kiválasztás csak a kiválasztott elemen belül legyen.

Ezután ezeket a változókat egy másik JavaScript-funkcióval láncolhatjuk be:

 var target = document.querySelector ('. shortlink'); függvényválasztás (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (elem); select.addRange (tartomány);  

Az első kiegészítés, range.selectNodeContents (elem), meghatározza a a választási tartomány amely ebben az esetben az az elem, amelyet a. \ t elem. Az utolsó sor, select.addRange (tartomány) a választást a megadott tartományra korlátozza.

Nagy! Mindannyian beállítjuk a funkciót. Hadd cselekedjünk.

Futtasd

A célelemet egy kattintásra esemény. Az elemre kattintva futtatjuk az éppen elvégzett funkciót, és átadjuk a paramétert annak az elemnek az osztálynevével, ahol az URL be van csomagolva; ebben az esetben ez az .shortlink__url.

 target.onclick = függvény () kiválasztás ('. shortlink__url'); ; 

Végeztünk. Amint azt korábban említettük, a webhelyén található egyéb tartalmak esetében is megteheti, hogy a felhasználók könnyebben másolhatnak.

Néhányan talán kíváncsi lennének, ha automatikusan tudnánk másolat, ahelyett, hogy kiemelné, a felhasználó rákattintása. Bár ez nagyon jó ötletnek tűnhet, sajnos nem elég könnyű elérni, és rossz felhasználói élményhez vezethet. A másolási műveletnek teljes mértékben a felhasználó beleegyezésével kell történnie.

Az ebben a bejegyzésben szereplő lépések csak a kiemelkedő akcióba kerülnek. Az, hogy a felhasználók másolják-e, vagy sem, teljesen rajtuk áll.

A következő linkeken keresztül megtekintheti a demót, vagy letöltheti a forráskódot.

• Demó megtekintése
• Letöltés forrása