it-swarm-eu.dev

C'è un modo per rendere il testo non selezionabile su una pagina HTML?

Sto costruendo un'interfaccia utente HTML con alcuni elementi di testo, come i nomi delle schede, che appaiono male quando selezionati. Sfortunatamente, è molto facile per un utente fare doppio clic sul nome di una scheda, che lo seleziona per impostazione predefinita in molti browser.

Potrei essere in grado di risolverlo con un trucco JavaScript (mi piacerebbe vedere anche quelle risposte) - ma spero davvero che ci sia qualcosa in CSS/HTML che funzioni direttamente su tutti i browser.

136
Tyler

Nella maggior parte dei browser, questo può essere ottenuto utilizzando CSS:

*.unselectable {
   -moz-user-select: -moz-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, dovrai utilizzare l'attributo unselectable dell'elemento che desideri non sia selezionabile. Puoi impostarlo usando 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 iniziale 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"));
187
Tim Down
<script type="text/javascript">

/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/


function disableSelection(target){

    if (typeof target.onselectstart!="undefined") //IE route
        target.onselectstart=function(){return false}

    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
        target.style.MozUserSelect="none"

    else //All other route (ie: Opera)
        target.onmousedown=function(){return false}

    target.style.cursor = "default"
}



//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"


</script>

[~ ~ #] modifica [~ ~ #]

Il codice apparentemente proviene da http://www.dynamicdrive.com

41
dimarzionist

Tutte le varianti CSS corrette sono:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
32
Blowsie

Prova questo:

<div onselectstart="return false">some stuff</div>

Semplice, ma efficace ... funziona con le versioni attuali di tutti i principali browser.

13
Stephen M. Redd

Per Firefox è possibile applicare la dichiarazione CSS "-moz-user-select" su "none". Consulta la loro documentazione, selezione utente.

È una "anteprima" del futuro "user-select" come si suol dire, quindi forse Opera o WebKit - i browser basati su tale supporto lo supporteranno. Ricordo anche di aver trovato qualcosa per Internet Explorer, ma non ricordo cosa :).

Ad ogni modo, a meno che non si tratti di una situazione specifica in cui la selezione del testo fa fallire alcune funzionalità dinamiche, non dovresti davvero ignorare ciò che gli utenti si aspettano da una pagina Web e che è in grado di selezionare qualsiasi testo desiderino.

11
Jorge Alves

Sto riscontrando un certo livello di successo con il CSS descritto qui http://www.quirksmode.org/css/selection.html :

::selection {
    background-color: transparent;
}

Si è occupato della maggior parte dei problemi che avevo riscontrato con alcuni elementi ThemeRoller ul in un'applicazione AIR (motore WebKit). Sempre ottenendo una piccola (circa 15 x 15) patch di nulla che viene selezionata, ma metà della pagina era stata selezionata in precedenza.

8
jlleblanc

Posiziona assolutamente i div sull'area di testo con un indice z più alto e dai a questi div un trasparente GIF grafico di sfondo.

Nota dopo aver pensato un po 'di più - Dovresti avere queste' copertine 'collegate in modo da fare clic su di esse per portarti dove doveva essere la scheda, il che significa che potresti/dovresti farlo con l'elemento di ancoraggio impostato su display:box, larghezza e altezza impostate, nonché l'immagine di sfondo trasparente.

6
Dave Rutledge

Per Safari, -khtml-user-select: none, proprio come Mozilla -moz-user-select (o, in JavaScript, target.style.KhtmlUserSelect="none";).

4
Alan Hensel

Per un esempio del motivo per cui potrebbe essere desiderabile sopprimere la selezione, vedere SIMILE TImeline , che utilizza il trascinamento della selezione per esplorare la linea temporale, durante la quale il movimento accidentale del mouse verticale provoca l'evidenziazione imprevista delle etichette, che sembra strano.

4
pdc

Ecco un Sass mixin (scss) per chi è interessato. Compass /CSS 3 non sembra avere un mixin selezionato dall'utente.

// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
    & {
        -webkit-touch-callout: $value;
        -webkit-user-select: $value;
        -khtml-user-select: $value;
        -moz-user-select: $value;
        -ms-user-select: $value;
        user-select: $value;
    }
}

Sebbene Compass lo farebbe in un modo più robusto, vale a dire aggiungere solo il supporto per i fornitori che hai scelto.

3
rgb

"Se i tuoi contenuti sono davvero interessanti, alla fine c'è poco che puoi fare per proteggerli"

È vero, ma la maggior parte delle copie, secondo la mia esperienza, non ha nulla a che fare con "in definitiva" o geek o plagisti determinati o qualcosa del genere. Di solito è una copia casuale da parte di persone all'oscuro, e persino una protezione semplice e facilmente sconfitta (facilmente sconfitta da gente come noi, cioè) funziona abbastanza bene per fermarli. Non sanno nulla di "visualizza sorgente" o cache o qualsiasi altra cosa ... diamine, non sanno nemmeno cosa sia un browser web o che ne stiano usando.

3
Big Bill

Se sembra male puoi usare CSS per cambiare l'aspetto delle sezioni selezionate.

1
Wedge

Anche le immagini possono essere selezionate.

Esistono limiti all'uso di JavaScript per deselezionare il testo, poiché potrebbe accadere anche nei luoghi in cui si desidera selezionare. Per garantire una carriera ricca e di successo, stai alla larga da tutti i requisiti che richiedono capacità di influenzare o gestire il browser oltre il normale ... a meno che, ovviamente, non ti stiano pagando molto bene.

1
Kinjal Dixit

Qualsiasi metodo JavaScript o CSS viene facilmente aggirato con Firebug (come nel caso di Flickr).

Puoi usare ::selection pseudo-element in CSS per modificare il colore di evidenziazione.

Se le schede sono collegamenti e rettangolo tratteggiato in stato attivo è un problema, puoi anche rimuoverlo (considera l'usabilità ovviamente).

1
Taylor Edmiston

Ci sono molte occasioni in cui la disattivazione della selettività migliora l'esperienza dell'utente.

Ad esempio, consentire all'utente di copiare un blocco di testo sulla pagina senza copiare il testo di tutti gli elementi dell'interfaccia ad esso associati (che si infrangerebbero all'interno del testo da copiare).

1
kbcom

Quanto segue funziona in Firefox in modo abbastanza interessante se rimuovo la linea di scrittura non funziona. Chiunque abbia qualche idea del perché sia ​​necessaria la riga di scrittura.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
0
hbtdev