Како аутоматски истицати текст након корисничког клика

Неки делови садржаја на веб сајтовима треба да буду копирани од стране корисника, као што су УРЛ адреса, аутоматски генерисани АПИ кључ или неколико редова кода (исјечци). Међутим, копирање ових садржаја може бити изазов, посебно за кориснике који користе трацкпад или усран миш. Зато им олакшајмо.

Ако сте наишли на веб сајтове као што је ТхеНектВеб, видећете да је УРЛ адреса кратке везе истакнута када кликнете на њу. Хајде да проверимо како се то ради.

Почетак

За почетак, постављамо ХТМЛ који омотава УРЛ кратке везе.

 
 Схортлинк 
  хттп://гоо.гл/9ЈЕпОз 
 
 

УРЛ је умотан у а спан са иконом из Јоникона. Стил ових елемената зависи искључиво од вас, јер ће зависити од изгледа вашег веб сајта. Али, у сврху овог демоа, стилизујем га на овај начин:

Једноставна је, плава и квадратна (овде преузмите стилске кодове).

ЈаваСцрипт

А овде је месо кода, ЈаваСцрипт. План је овде означите УРЛ како корисници кликну на њега.

Код почињемо с варијаблом која одабире елемент у којем ће корисник кликнути.

 вар таргет = доцумент.куериСелецтор ('. схортлинк'); 

Тхе куериСелецтор је ЈаваСцрипт метода за избор елемента; у основи ради као јКуери конструктор $ (). Можете користити нотацију тачака да бисте добили елемент од класе или # нотација да бисте добили елемент помоћу ИД-а.

Затим морамо да креирамо нову ЈаваСцрипт функцију.

 избор функција (елем)  

Нашу функцију називамо као селекција (). Као што можете видети горе, функција захтева параметар да проследи елемент који облаже УРЛ или било који регуларни текст који желимо да истакнемо. У нашем случају, то би био спан елемент са схортлинк__урл класа.

У оквиру ове функције додајемо још неколико варијабли:

 вар таргет = доцумент.куериСелецтор ('. схортлинк'); избор функције (елем) вар елем = доцумент.куериСелецтор (елем); вар селецт = виндов.гетСелецтион (); вар ранге = доцумент.цреатеРанге ();  

Прво, елем варијабла бира елемент који пролазимо кроз параметар функције. Друга варијабла, изаберите, покреће природну ЈаваСцрипт функцију да би добио избор текста. Последња променљива, домет контролише опсег избора; желели бисмо да осигурамо да је селекција само унутар изабраног елемента.

Затим, повезујемо ове варијабле са неколико других ЈаваСцрипт функција на следећи начин:

 вар таргет = доцумент.куериСелецтор ('. схортлинк'); избор функције (елем) вар елем = доцумент.куериСелецтор (елем); вар селецт = виндов.гетСелецтион (); вар ранге = доцумент.цреатеРанге (); ранге.селецтНодеЦонтентс (елем); селецт.аддРанге (опсег);  

Први додатак, ранге.селецтНодеЦонтентс (елем), дефинише опсег избора што је у овом случају елемент који се наводи у елем. Последња линија, селецт.аддРанге (опсег) чини избор ограниченим на одређени опсег.

Сјајно! Сви смо спремни за ту функцију. Ставимо га у акцију.

Покрени

Вежемо циљни елемент са онцлицк догађај. Када се елемент кликне, покрећемо функцију коју смо управо направили и проследимо параметар називу класе елемента где је УРЛ преломљен; у овом случају јесте .схортлинк__урл.

 таргет.онцлицк = фунцтион () селецтион ('. схортлинк__урл'); ; 

Ми смо готови. Као што је раније споменуто, можете то учинити и за друге врсте садржаја на вашој веб локацији које бисте можда жељели да ваши корисници лакше копирају.

Неки од вас се можда питају да ли можемо аутоматски цопи, уместо да само истакнете, схортурл по клику корисника. Иако ово може изгледати као стварно добра идеја, нажалост, то није лако постићи и може узроковати лоше корисничко искуство. Акција копирања треба бити у потпуности под пристанком корисника.

Кораци у овом посту се односе само на акцију означавања. Да ли ће их корисници копирати или не, зависи од њих.

Можете да пратите следеће везе да бисте видели демо или преузели изворни код.

• Виев Демо
• Довнлоад Соурце