Τρόπος αυτόματης επισημάνσεως κειμένου μετά από κλικ χρήστη

Ορισμένα κομμάτια περιεχομένου σε ιστότοπους προορίζονται να αντιγραφούν από τους χρήστες, όπως μια διεύθυνση URL, ένα κλειδί API που δημιουργείται αυτόματα ή μερικές σειρές κώδικα (αποσπάσματα). Ωστόσο, η αντιγραφή αυτών των περιεχομένων θα μπορούσε να αποτελέσει πρόκληση, ιδιαίτερα για χρήστες που χρησιμοποιούν ένα trackpad ή ένα μίζερο ποντίκι. Ας το διευκολύνουμε λοιπόν.

Αν έχετε σκοντάψει σε ιστοσελίδες όπως το TheNextWeb, θα διαπιστώσετε ότι η διεύθυνση URL σύντομης σύνδεσης επισημαίνεται όταν κάνετε κλικ σε αυτό. Ας δούμε πώς γίνεται αυτό.

Ξεκινώντας

Κατ 'αρχήν, αναλύουμε το HTML που περιβάλλει τη διεύθυνση URL σύντομης σύνδεσης.

 
 Σύντομη σύνδεση 
  http://goo.gl/9JEpOz 
 
 

Έχουμε την διεύθυνση URL τυλιγμένη σε α σπιθαμή μαζί με ένα εικονίδιο από το Ionicon. Το στυλ αυτών των στοιχείων εξαρτάται αποκλειστικά από εσάς, καθώς θα εξαρτηθεί από τη διάταξη της ιστοσελίδας σας. Αλλά, για τους σκοπούς αυτού του demo, το στυλ με αυτό τον τρόπο:

Είναι απλό, μπλε και τετράγωνο (αρπάξτε τους κωδικούς στυλ εδώ).

Το JavaScript

Και εδώ είναι το κρέας του κώδικα, το JavaScript. Το σχέδιο είναι εδώ επισημάνετε τη διεύθυνση URL καθώς οι χρήστες κάνουν κλικ σε αυτήν.

Ξεκινάμε τον κώδικα με μια μεταβλητή που επιλέγει το στοιχείο στο οποίο ο χρήστης θα κάνει κλικ.

 var στόχος = document.querySelector ('shortlink'); 

ο querySelector είναι μια μέθοδος JavaScript για την επιλογή του στοιχείου. λειτουργεί βασικά σαν τον κατασκευαστή jQuery $ (). Μπορείτε να χρησιμοποιήσετε τη σημείωση τελεία για να πάρετε το στοιχείο από την κλάση ή # # σημείωση για να αποκτήσετε ένα στοιχείο από το αναγνωριστικό.

Στη συνέχεια, πρέπει να δημιουργήσουμε μια νέα λειτουργία JavaScript.

 επιλογή λειτουργίας (elem)  

Ονομάζουμε τη λειτουργία μας ως επιλογή(). Και όπως μπορείτε να δείτε παραπάνω, η λειτουργία απαιτεί μια παράμετρο να περάσει το στοιχείο που περιβάλλει τη διεύθυνση URL ή οποιοδήποτε κανονικό κείμενο που θα θέλαμε να τονίσουμε. Στην περίπτωσή μας, αυτό θα ήταν το σπιθαμή στοιχείο με το shortlink__url τάξη.

Μέσα σε αυτή τη λειτουργία, προσθέτουμε και άλλες δύο μεταβλητές:

 var στόχος = document.querySelector ('shortlink'); επιλογή λειτουργίας (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var εύρος = document.createRange ();  

Πρώτον, το elem μεταβλητή επιλέγει το στοιχείο που περνάμε από την παράμετρο της συνάρτησης. Η δεύτερη μεταβλητή, επιλέγω, τρέχει μια εγγενή λειτουργία JavaScript για να πάρετε την επιλογή του κειμένου. Η τελευταία μεταβλητή, εύρος ελέγχει την περιοχή επιλογής. θα θέλαμε να διασφαλίσουμε ότι η επιλογή είναι μόνο εντός του επιλεγμένου στοιχείου.

Στη συνέχεια, αλυσσίζουμε αυτές τις μεταβλητές με μερικές άλλες λειτουργίες JavaScript ως εξής:

 var στόχος = document.querySelector ('shortlink'); επιλογή λειτουργίας (elem) var elem = document.querySelector (elem); var select = window.getSelection (); var εύρος = document.createRange (); range.selectNodeContents (elem); select.addRange (εύρος);  

Η πρώτη προσθήκη, range.selectNodeContents (elem), ορίζει το περιοχή της επιλογής που στην περίπτωση αυτή είναι το στοιχείο που αναφέρεται στο elem. Η τελευταία γραμμή, select.addRange (εύρος) κάνει την επιλογή περιορισμένη στο καθορισμένο εύρος.

Μεγάλος! Είμαστε όλοι μαζί με τη λειτουργία. Ας το θέσουμε σε δράση.

Τρέξτο

Δεσμευόμαστε το στοιχείο στόχο με ένα στο κλικ Εκδήλωση. Καθώς κάνετε κλικ στο στοιχείο, τρέχουμε τη λειτουργία που μόλις έχουμε κάνει και περάστε την παράμετρο με το όνομα της κλάσης του στοιχείου όπου τυλίγεται η διεύθυνση URL. στην περίπτωση αυτή είναι .shortlink__url.

 target.onclick = συνάρτηση () επιλογή ('. shortlink__url'); , 

Εμεις τελειωσαμε. Όπως αναφέρθηκε νωρίτερα, μπορείτε επίσης να το κάνετε για άλλους τύπους περιεχομένου στον ιστότοπό σας, που ίσως θέλετε οι χρήστες σας να αντιγράψουν πιο εύκολα.

Κάποιοι από εσάς μπορεί να αναρωτιέστε αν μπορούσαμε αυτόματα αντίγραφο, αντί να τονίζεται μόνο, το shorturl μετά το κλικ του χρήστη. Ενώ αυτό μπορεί να φαίνεται σαν μια πολύ καλή ιδέα, δυστυχώς δεν είναι αρκετά εύκολο να επιτευχθεί και μπορεί να προκαλέσει κακή εμπειρία χρήστη. Η ενέργεια αντιγραφής πρέπει να είναι πλήρως κάτω από τη συγκατάθεση του χρήστη.

Τα βήματα αυτής της ανάρτησης λαμβάνουν μόνο την ενέργεια που τονίζεται. Είτε οι χρήστες μας θα αντιγράψουν είτε όχι, εξαρτάται εξ ολοκλήρου από αυτούς.

Μπορείτε να ακολουθήσετε τους παρακάτω συνδέσμους για να δείτε το demo ή να κατεβάσετε τον πηγαίο κώδικα.

• Προβολή επίδειξης
• Λήψη πηγής