no.hideout-lastation.com
Paradis For Designere Og Utviklere


Slik fjerner du automatisk tekst ved brukerklikk

Noen deler av innhold på nettsteder er ment å bli kopiert av brukerne, for eksempel en URL-adresse, en automatisk generert API-nøkkel eller noen få linjer med kode (utdrag). Men å kopiere disse innholdene kan være en utfordring, spesielt for brukere som bruker en styreflate eller en crappy-mus. Så la oss gjøre det lettere for dem.

Hvis du har snublet på nettsteder som TheNextWeb, vil du oppdage at shortlink URL er markert når du klikker på den. La oss sjekke ut hvordan dette er gjort.

Starter

Til å begynne med legger vi ut HTML-koden som bryter inn URL-adressen.

short
http://goo.gl/9JEpOz

Vi har nettadressen innpakket i et span sammen med et ikon fra Ionicon. Stilen til disse elementene er helt opp til deg, da det vil avhenge av ditt nettstedoppsett. Men i form av denne demonstrasjonen stiler jeg det på denne måten:

Det er enkelt, blått og firkantet (ta tak i stilkoder her).

JavaScript

Og her er kjøttet av koden, JavaScript. Planen her er å markere nettadressen som brukerne klikker på den .

Vi starter koden med en variabel som velger elementet som brukeren klikker på.

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

querySelector er en JavaScript-metode for å velge elementet; det fungerer i utgangspunktet som jQuery-konstruktøren $() . Du kan bruke prikknotasjonen for å få elementet av klassen eller # notasjonen for å få et element av ID.

Deretter må vi opprette en ny JavaScript-funksjon.

 funksjonsvalg (elem) {} 

Vi heter vår funksjon som selection() . Og som du kan se over, krever funksjonen en parameter for å passere elementet som bryter inn nettadressen eller en vanlig tekst som vi vil fremheve. I vårt tilfelle vil dette være span med shortlink__url klassen.

Innenfor denne funksjonen legger vi til et par flere variabler:

 var target = document.querySelector ('. shortlink'); funksjonsvalg (elem) {var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); } 

Først velger elem variabelen elementet som vi passerer gjennom parameteren til funksjonen. Den andre variabelen, select, kjører en innfødt JavaScript-funksjon for å få valget av tekst. Den siste variabelen, range styrer utvalgsområdet; Vi vil gjerne sørge for at valget bare er innenfor det valgte elementet.

Deretter kjedene vi disse variablene med et par andre JavaScript-funksjoner som følger:

 var target = document.querySelector ('. shortlink'); funksjonsvalg (elem) {var elem = document.querySelector (elem); var select = window.getSelection (); var range = document.createRange (); range.selectNodeContents (ELEM); select.addRange (område); } 

Det første tillegget, range.selectNodeContents(elem), definerer utvalgets utvalg som i dette tilfellet er elementet som referert i elem . Den siste linjen, select.addRange(range) gjør at valget er begrenset til det angitte området.

Flott! Vi er alle satt sammen med funksjonen. La oss sette det til handling.

Kjør det

Vi binder målelementet med en onclick hendelse. Når elementet klikkes, kjører vi funksjonen vi nettopp har gjort og sender parameteren med klassenavnet til elementet der nettadressen er innpakket. i dette tilfellet er det .shortlink__url .

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

Vi er ferdige. Som nevnt tidligere kan du også gjøre det for andre typer innhold på nettstedet ditt, som du kanskje vil at brukerne skal kopiere lettere.

Noen av dere lurer kanskje på om vi kunne kopiere i stedet for bare å markere, shorturl ved brukerklikk. Selv om dette kan virke som en veldig god idé, er det dessverre ikke ganske enkelt å oppnå og kan forårsake en dårlig brukeropplevelse. Kopieringsaksjonen skal være fullt ut under brukerens samtykke.

Trinnene i dette innlegget tar bare opp til høydehandlingen. Hvorvidt våre brukere vil kopiere det eller ikke, er helt opp til dem.

Du kan følge gjennom følgende linker for å se demoen eller laste ned kildekoden.

  • Se demo
  • Last ned kilde

5 beste Windows Apps for å overvåke Internett-bruk

5 beste Windows Apps for å overvåke Internett-bruk

Når du kommer til internett hjemme eller som student, er det alltid en hette på din internettbruksgrense . Men når du er online, har du en tendens til å bli båret bort og noen ganger ender opp med å utmanne en hele måneds internettpakke innen et par uker.Det kan være flere grunner til det. For eksempel er noen nettsteder tyngre enn de andre. Tilsva

(Tekniske og design tips)

Hvorfor din mening Matters og hvorfor du ikke bør frykte å ha en

Hvorfor din mening Matters og hvorfor du ikke bør frykte å ha en

Vi har alle meninger. Noen av oss har ingen inhiberinger som deler dem med totalt fremmede på internett eller via sosiale medier. Under noen omstendigheter kolliderer to helt forskjellige meninger og helvetet går løs. Og dette skjer daglig, noen ganger i timen.Å ha meninger er sunn. Det indikerer en progressiv natur - en som betyr at vi forbedrer for å være bedre, bedre utdannede, mer kunnskapsrike mennesker. Men

(Tekniske og design tips)