C'è un modo per rendere il testo non selezionabile su una pagina HTML?[duplicare]
https://stackoverflow.com/questions/69430
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Questa domanda ha già una risposta qui:
Sto creando un'interfaccia utente HTML con alcuni elementi di testo, come i nomi delle schede, che sembrano errati quando selezionati.Sfortunatamente, è molto semplice per un utente fare doppio clic sul nome di una scheda, che viene selezionata 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 direttamente in CSS/HTML che funzioni su tutti i browser.
Soluzione
Nella maggior parte dei browser, ciò può essere ottenuto utilizzando i 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 il file unselectable attributo dell'elemento che desideri non 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 iniziale di ogni elemento all'interno del file <div>.Se questo è un problema, potresti invece utilizzare 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"));
Altri suggerimenti
<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>
MODIFICARE
Apparentemente il codice proviene da http://www.dynamicdrive.com
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;
Prova questo:
<div onselectstart="return false">some stuff</div>
Semplice ma efficace...funziona nelle versioni attuali di tutti i principali browser.
Per Firefox è possibile applicare la dichiarazione CSS "-moz-user-select" a "none".Controlla la loro documentazione, selezione dell'utente.
È una "anteprima" della futura "selezione dell'utente", come si suol dire, quindi forse musica lirica O WebKiti browser basati su questo lo supporteranno.Ricordo anche di aver trovato qualcosa per Internet Explorer, ma non ricordo cosa :).
In ogni caso, a meno che non si tratti di una situazione specifica in cui la selezione del testo fa fallire alcune funzionalità dinamiche, non dovresti sovrascrivere ciò che gli utenti si aspettano da una pagina web, ovvero la possibilità di selezionare qualsiasi testo desiderino.
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 riscontravo con alcuni ThemeRoller ul elementi in un'applicazione AIR (motore WebKit).Sto ancora ottenendo un piccolo (ca.15 x 15) zona del nulla che viene selezionata, ma metà della pagina era già stata selezionata prima.
Posiziona assolutamente i div sull'area di testo con uno z-index più alto e dai a questi div un aspetto trasparente GIF grafica di sfondo.
Nota dopo averci pensato un po' più a fondo: dovresti collegare queste 'copertine' in modo che facendo clic su di esse ti porti dove avrebbe dovuto 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.
Per un esempio del motivo per cui potrebbe essere desiderabile sopprimere la selezione, vedere Cronologia SIMILE, che utilizza il trascinamento della selezione per esplorare la sequenza temporale, durante la quale il movimento verticale accidentale del mouse fa sì che le etichette vengano evidenziate inaspettatamente, il che sembra strano.
Per Safari, -khtml-user-select: none, proprio come quello di Mozilla -moz-user-select (o, in JavaScript, target.style.KhtmlUserSelect="none";).
"Se il tuo contenuto è davvero interessante, allora c'è poco che alla fine puoi fare per proteggerlo"
È vero, ma la maggior parte delle copie, secondo la mia esperienza, non ha nulla a che fare con la "finalità" o con i geek o con i plagiatori determinati o qualcosa del genere.Di solito si tratta di copie casuali da parte di persone all'oscuro, e anche una protezione semplice e facilmente sconfitta (facilmente sconfitta da persone 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 stanno utilizzando uno.
Ecco un Sass mixin (scss) per chi è interessato. Bussola/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, ad es.aggiungi solo il supporto per i fornitori che hai scelto.
Se sembra brutto puoi usare i CSS per cambiare l'aspetto delle sezioni selezionate.
Qualsiasi metodo JavaScript o CSS può essere facilmente aggirato con Firebug (come il caso di Flickr).
Puoi usare il ::selection pseudo-elemento in CSS per modificare il colore di evidenziazione.
Se le schede sono collegamenti e il rettangolo tratteggiato in stato attivo è preoccupante, puoi rimuovere anche quello (considera l'usabilità ovviamente).
Esistono molte occasioni in cui la disattivazione della selezionabilità migliora l'esperienza dell'utente.
Ad esempio, consentire all'utente di copiare un blocco di testo sulla pagina senza copiare il testo di eventuali elementi dell'interfaccia ad esso associati (che verrebbero intervallati dal testo da copiare).
È possibile selezionare anche le immagini.
Esistono limiti all'utilizzo di JavaScript per deselezionare il testo, poiché potrebbe verificarsi anche nei punti in cui desideri selezionarlo.Per assicurarti una carriera ricca e di successo, evita tutti i requisiti che richiedono la capacità di influenzare o gestire il browser oltre l'ordinario...a meno che, ovviamente, non ti paghino molto bene.
Quanto segue funziona in Firefox in modo abbastanza interessante se rimuovo la riga di scrittura non funziona.Qualcuno ha qualche idea del motivo per cui è necessaria la riga di scrittura.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
