Πότε είναι εντάξει να απενεργοποιήσετε την επιλογή κειμένου;

Χρησιμοποιώντας CSS, είναι δυνατό να αποτρέψετε τους χρήστες από την επιλογή κειμένου μέσα σε ένα στοιχείο χρησιμοποιώντας user-select: none. Τώρα, είναι κατανοητό γιατί κάτι τέτοιο μπορεί να θεωρηθεί «αμφιλεγόμενο». Εννοώ, θα πρέπει να απενεργοποιούμε τυπικές συμπεριφορές χρήστη; Σε γενικές γραμμές, όχι, δεν θα έπρεπε να το κάνουμε αυτό. Αλλά η απενεργοποίηση της επιλογής κειμένου έχει κάποιες νόμιμες (αν και σπάνιες) περιπτώσεις χρήσης; Ετσι νομίζω.

Σε αυτό το άρθρο θα εξερευνήσουμε αυτές τις περιπτώσεις χρήσης και θα ρίξουμε μια ματιά στο πώς μπορούμε να χρησιμοποιήσουμε user-select: none να βελτιώσει (όχι να εμποδίσει) τις εμπειρίες των χρηστών. Δεν αξίζει επίσης τίποτα ότι το user-select Το ακίνητο έχει και άλλες αξίες none που μπορεί να χρησιμοποιηθεί για να αλλάξει τη συμπεριφορά της επιλογής κειμένου αντί να την απενεργοποιήσει εντελώς, και μια άλλη τιμή που ακόμη και επιβάλλει επιλογή κειμένου, οπότε θα ρίξουμε μια ματιά και σε αυτά.

Πιθανές user-select αξιών

Ας ξεκινήσουμε τα πράγματα τρέχοντας μέσα από το διαφορετικό user-select αξίες και τι κάνουν.

εφαρμόζοντας user-select: none; σε ένα στοιχείο σημαίνει ότι το περιεχόμενο κειμένου και το ένθετο περιεχόμενο κειμένου δεν θα είναι λειτουργικά ή οπτικά επιλέξιμο (π.χ. ::selection δεν θα λειτουργήσει). Εάν επρόκειτο να κάνετε μια επιλογή που περιείχε κάποιο μη επιλέξιμο περιεχόμενο, το μη επιλέξιμο περιεχόμενο θα παραλειφόταν από την επιλογή, επομένως έχει εφαρμοστεί αρκετά καλά. Και η υποστήριξη είναι μεγάλη.

Δυσμενώς, user-select: text κάνει το περιεχόμενο επιλέξιμο. Θα χρησιμοποιούσατε αυτήν την τιμή για να αντικαταστήσετε user-select: none.

user-select: contain είναι ένα ενδιαφέρον. Η εφαρμογή του σημαίνει ότι εάν μια επιλογή ξεκινά μέσα στο στοιχείο, τότε πρέπει να τελειώνει και μέσα σε αυτό, περιέχοντάς το. Αυτό παραδόξως δεν ισχύει όταν ξεκινά η επιλογή πριν το στοιχείο, ωστόσο, γι' αυτό πιθανώς κανένα πρόγραμμα περιήγησης δεν το υποστηρίζει αυτήν τη στιγμή. (Ο Internet Explorer και οι προηγούμενες εκδόσεις του Microsoft Edge το υποστήριζαν στο παρελθόν με το πρόσχημα του user-select: element.)

Με user-select: all, η επιλογή μέρους του περιεχομένου του στοιχείου έχει ως αποτέλεσμα την αυτόματη επιλογή όλου του. Είναι όλα ή τίποτα, κάτι που είναι πολύ ασυμβίβαστο αλλά χρήσιμο σε περιπτώσεις όπου οι χρήστες είναι πιο πιθανό να αντιγράψουν περιεχόμενο στο πρόχειρό τους (π.χ. κοινή χρήση και ενσωμάτωση συνδέσμων, αποσπάσματα κώδικα κ.λπ.). Αντί για διπλό κλικ, οι χρήστες θα χρειαστεί να κάνουν μόνο ένα κλικ για να γίνει αυτόματη επιλογή του περιεχομένου.

Να είστε προσεκτικοί, ωστόσο, καθώς αυτό δεν είναι πάντα το χαρακτηριστικό που νομίζετε ότι είναι. Τι γίνεται αν οι χρήστες θέλουν μόνο να επιλέξουν μέρος του περιεχομένου (π.χ. μόνο το μέρος του ονόματος γραμματοσειράς ενός αποσπάσματος γραμματοσειρών Google ή ένα μέρος ενός αποσπάσματος κώδικα); Είναι ακόμα καλύτερο να το χειριστείς»Αντιγραφή στο πρόχειροχρησιμοποιώντας JavaScript σε πολλά σενάρια.

Καλύτερη εφαρμογή του user-select: all είναι να διασφαλιστεί ότι τα εισαγωγικά αντιγράφονται πλήρως και με ακρίβεια.

Η συμπεριφορά του user-select: auto (η αρχική τιμή του user-select) εξαρτάται από το στοιχείο και τον τρόπο χρήσης του. Μπορείτε να μάθετε περισσότερα για αυτό στο το αλμανάκ μας.

Τώρα ας στραφούμε στην εξερεύνηση περιπτώσεων χρήσης για user-select: none...

Αφαίρεση μη κειμένου από την επιλογή

Όταν αντιγράφετε περιεχόμενο από μια ιστοσελίδα, είναι πιθανώς από ένα άρθρο ή κάποιο άλλο είδος περιεχομένου μεγάλης μορφής, σωστά; Πιθανότατα δεν θέλετε η επιλογή σας να περιλαμβάνει εικόνες, emoji (τα οποία μερικές φορές μπορούν να αντιγραφούν ως κείμενο, π.χ. ":thinkingface:") και άλλα πράγματα που μπορεί να περιμένετε να βρείτε τυλιγμένα σε <aside> στοιχείο (π.χ. παροτρύνσεις για δράση εντός άρθρου, διαφημίσεις ή κάτι άλλο που δεν αποτελεί μέρος του κύριου περιεχομένου).

Για να αποτρέψετε τη συμπερίληψη κάτι στις επιλογές, βεβαιωθείτε ότι είναι τυλιγμένο σε ένα στοιχείο HTML και, στη συνέχεια, εφαρμόστε user-select: none σε αυτό:

<p>lorem <span style="user-select: none">🤔</span> ipsum</p>

<aside style="user-select: none">
  <h1>Heading</h1>
  <p>Paragraph</p>
  <a>Call to action</a>
</aside>

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

Αποτροπή τυχαίας επιλογής

Εφαρμογή user-select: none σε συνδέσμους που μοιάζουν με κουμπιά (π.χ <a href="/el/whatever" class="button">Click Me!</a>).

Δεν είναι δυνατή η επιλογή του περιεχομένου κειμένου του α <button> or <input type="submit"> γιατί, καλά, γιατί; Ωστόσο, αυτή η συμπεριφορά δεν ισχύει για συνδέσμους, επειδή παραδοσιακά αποτελούν μέρος μιας παραγράφου που πρέπει να είναι επιλέξιμη.

Δίκαιο.

Θα μπορούσαμε να το υποστηρίξουμε αυτό Το να κάνετε συνδέσμους να μοιάζουν με κουμπιά είναι ένα αντί-μοτίβο, αλλά τέλος πάντων. Δεν σπάει το διαδίκτυο, έτσι; Αυτό το πλοίο έχει αποπλεύσει ούτως ή άλλως, επομένως εάν χρησιμοποιείτε συνδέσμους που έχουν σχεδιαστεί για να μοιάζουν με κουμπιά, τότε θα πρέπει να μιμούνται τη συμπεριφορά των κουμπιών, όχι μόνο για λόγους συνέπειας, αλλά για να εμποδίζουν τους χρήστες να επιλέξουν κατά λάθος το περιεχόμενο αντί να ενεργοποιήσουν την αλληλεπίδραση.

Σίγουρα είμαι επιρρεπής στο να επιλέγω πράγματα κατά λάθος, καθώς χρησιμοποιώ τον φορητό υπολογιστή μου στο κρεβάτι περισσότερο από όσο θέλω να παραδεχτώ. Επιπλέον, υπάρχουν αρκετές ιατρικές παθήσεις που μπορούν να επηρεάσουν τον έλεγχο και τον συντονισμό, μετατρέποντας ένα επιδιωκόμενο κλικ σε ακούσια μεταφορά/επιλογή, επομένως υπάρχουν προβλήματα προσβασιμότητας που μπορούν να αντιμετωπιστούν με user-select πάρα πολύ.

Αλληλεπιδράσεις που απαιτούν μεταφορά (σκόπιμα) υπάρχουν επίσης φυσικά (π.χ. σε παιχνίδια προγράμματος περιήγησης), αλλά αυτές είναι ασυνήθιστες. Ωστόσο, αυτό απλώς δείχνει user-select έχει στην πραγματικότητα αρκετές περιπτώσεις χρήσης.

Αποφυγή κλοπής περιεχομένου με paywalled

Το περιεχόμενο Paywalled γίνεται πολύ μίσος, αλλά αν πιστεύετε ότι πρέπει να προστατεύσετε το περιεχόμενό σας, είναι το περιεχόμενό σας - κανείς δεν έχει το δικαίωμα να το κλέψει μόνο και μόνο επειδή δεν πιστεύει ότι πρέπει να πληρώσει για αυτό.

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

Θάμπωμα του περιεχομένου με CSS:

article { filter: blur(<radius>); }

Απενεργοποίηση των συντομεύσεων πληκτρολογίου για DevTools:

document.addEventListener("keydown", function (e) {
  if (e.keyCode == 123) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 73) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 74) e.preventDefault();
  else if ((e.ctrlKey || e.metaKey) && e.altKey && e.keyCode == 85) e.preventDefault();
});

Απενεργοποίηση της πρόσβασης στα DevTools μέσω του μενού περιβάλλοντος απενεργοποιώντας το ίδιο το μενού περιβάλλοντος:

document.addEventListener("contextmenu", e => e.preventDefault())

Και φυσικά, για να εμποδίσουμε τους χρήστες να αντιγράψουν το περιεχόμενο όταν δεν τους επιτρέπεται να το διαβάσουν στην πηγή, εφαρμόζοντας user-select: none:

<article style="user-select: none">

Κάποια άλλη περίπτωση χρήσης;

Αυτές είναι οι τρεις περιπτώσεις χρήσης που θα μπορούσα να σκεφτώ για να αποτρέψω την επιλογή κειμένου. Αρκετοί άλλοι πέρασαν από το μυαλό μου, αλλά όλοι μου φάνηκαν σαν τέντωμα. Αλλά τι γίνεται με εσάς; Χρειάστηκε να απενεργοποιήσετε την επιλογή κειμένου σε κάτι; Θα ηθελα να ξερω!