Domanda Come disabilitare l'evidenziazione della selezione del testo?


Per ancore che fungono da pulsanti (ad esempio, Domande , tag , utenti , ecc. nella parte superiore della pagina Overflow dello stack) o schede, esiste un modo standard CSS per disabilitare l'effetto di evidenziazione se l'utente seleziona accidentalmente il testo?

Mi rendo conto che questo potrebbe essere fatto con JavaScript, e un po 'di Google ha dato il solo Mozilla -moz-user-select opzione.

Esiste un modo conforme allo standard per realizzare questo con i CSS e, in caso negativo, qual è l'approccio "best practice"?


4349
2018-05-05 20:29


origine


risposte:


AGGIORNAMENTO Gennaio 2017:

Secondo Posso usare , il user-select è attualmente supportato in tutti i browser ad eccezione di Internet Explorer 9 e versioni precedenti (ma purtroppo ancora  ha bisogno di un prefisso del venditore).


Tutte le varianti CSS corrette sono:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Nota che è un funzione non standard  (non è una parte di alcuna specifica). Non è garantito il funzionamento in tutto il mondo e potrebbero esserci differenze nell'implementazione tra i browser e in futuro i browser potrebbero abbandonare il supporto.


Maggiori informazioni possono essere trovate in Documentazione sulla rete per sviluppatori Mozilla .


6358
2017-12-05 11:45



Nella maggior parte dei browser, questo può essere ottenuto usando variazioni proprietarie sul CSS user-select proprietà, originariamente proposto e poi abbandonato in CSS3  e ora proposto in CSS UI Livello 4 :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Per IE <10 e Opera <15, sarà necessario utilizzare il unselectable attributo dell'elemento che desideri non essere selezionabile. Puoi impostarlo utilizzando un attributo in HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Purtroppo questa proprietà non è ereditata, il che significa che devi inserire un attributo nel tag di inizio di ogni elemento all'interno di <div>. Se questo è un problema, puoi invece usare JavaScript per farlo in modo ricorsivo per i discendenti di un elemento:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Aggiornamento 30 aprile 2014 : Questo attraversamento dell'albero deve essere rieseguito ogni volta che un nuovo elemento viene aggiunto all'albero, ma da un commento di @Han sembra che sia possibile evitare questo aggiungendo a mousedown gestore di eventi che imposta unselectable sul bersaglio dell'evento. Vedere http://jsbin.com/yagekiji/1  per dettagli.


Questo ancora non copre tutte le possibilità. Mentre è impossibile avviare selezioni in elementi non selezionabili, in alcuni browser (ad esempio IE e Firefox) è ancora impossibile impedire selezioni che iniziano prima e terminano dopo l'elemento non selezionabile senza rendere non selezionabile l'intero documento.


727
2017-11-13 16:05



È una soluzione JavaScript per IE

onselectstart="return false;"

165
2018-05-05 20:37



Fino ai CSS 3 user-select  la proprietà diventa disponibile, Geco browser basati su -moz-user-select proprietà che hai già trovato. WebKit  e i browser basati su Blink supportano il -webkit-user-select proprietà.

Questo ovviamente non è supportato nei browser che non utilizzano il motore di rendering Gecko.

Non esiste un modo semplice e rapido di "standard" per farlo; usare JavaScript è un'opzione.

La vera domanda è, perché vuoi che gli utenti non siano in grado di evidenziare e presumibilmente copiare e incollare determinati elementi? Non mi sono imbattuto in una sola volta in cui non volevo permettere agli utenti di evidenziare una parte del mio sito web. Molti dei miei amici, dopo aver trascorso molte ore a leggere e scrivere il codice, useranno la funzione di evidenziazione come un modo per ricordare dove si trovavano nella pagina o per fornire un indicatore in modo che i loro occhi sappiano dove guardare dopo.

L'unico posto in cui potrei vedere questo essere utile è se hai pulsanti per i moduli che non devono essere copiati e incollati se un utente copia e incolla il sito web.


159
2018-05-24 21:24



Se si desidera disabilitare la selezione del testo su tutto tranne su <p> elementi, puoi farlo in CSS (fai attenzione al -moz-none che consente l'override in sottoelementi, che è consentito in altri browser con none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



Nelle soluzioni di cui sopra la selezione viene interrotta, ma l'utente pensa ancora di poter selezionare il testo perché il cursore cambia ancora. Per mantenerlo statico, dovrai impostare il tuo cursore CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Ciò renderà il tuo testo totalmente piatto, come se fosse in un'applicazione desktop.


111
2018-05-05 20:46



Puoi farlo in Firefox e Safari (anche Chrome?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

101
2017-09-21 07:09