JQuery o jQuery-UI hanno qualche funzionalità per disabilitare la selezione del testo per determinati elementi del documento?
JQuery o jQuery-UI hanno qualche funzionalità per disabilitare la selezione del testo per determinati elementi del documento?
Risposte:
In jQuery 1.8, questo può essere fatto come segue:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
Se usi l'interfaccia utente di jQuery, esiste un metodo per farlo, ma può gestire solo la selezione del mouse (ovvero CTRL+ Afunziona ancora):
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
Il codice è davvero semplice, se non si desidera utilizzare l'interfaccia utente jQuery:
$(el).attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
Ho trovato questa risposta ( Prevenire l'evidenziazione della tabella di testo ) molto utile e forse può essere combinata con un altro modo di fornire compatibilità con IE.
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Ecco una soluzione più completa per la selezione di disconnessione e la cancellazione di alcuni dei tasti di scelta rapida (come Ctrl+ ae Ctrl+ c. Test: Cmd + ae Cmd+ c)
(function($){
$.fn.ctrlCmd = function(key) {
var allowDefault = true;
if (!$.isArray(key)) {
key = [key];
}
return this.keydown(function(e) {
for (var i = 0, l = key.length; i < l; i++) {
if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
allowDefault = false;
}
};
return allowDefault;
});
};
$.fn.disableSelection = function() {
this.ctrlCmd(['a', 'c']);
return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'})
.bind('selectstart', false);
};
})(jQuery);
e chiama esempio:
$(':not(input,select,textarea)').disableSelection();
Questo potrebbe anche non essere sufficiente per le vecchie versioni di FireFox (non so dire quale). Se tutto ciò non funziona, aggiungi quanto segue:
.on('mousedown', false)
attr('unselectable', 'on')
due volte? È un refuso o è utile?
Quanto segue disabiliterebbe la selezione di tutte le 'voci' di classi in tutti i browser comuni (IE, Chrome, Mozilla, Opera e Safari):
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
$(document).ready(function(){
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
});
Questo può essere fatto facilmente usando JavaScript Questo è applicabile a tutti i Browser
<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") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
Chiama per questa funzione
<script type="text/javascript">
disableSelection(document.body)
</script>
Questo è in realtà molto semplice. Per disabilitare la selezione del testo (e anche fare clic + trascinamento del testo (ad esempio un collegamento in Chrome)), basta usare il seguente codice jQuery:
$('body, html').mousedown(function(event) {
event.preventDefault();
});
Tutto ciò fa è impedire che ciò avvenga quando si fa clic con il mouse ( mousedown()
) nei tag body
e html
. Puoi facilmente cambiare l'elemento semplicemente cambiando il testo tra le due virgolette (es. Cambia $('body, html')
in $('#myUnselectableDiv')
per rendere il myUnselectableDiv
div che sia, beh, non selezionabile.
Un breve frammento per mostrarti / dimostrarlo:
$('#no-select').mousedown(function(event) {
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>
Si noti che questo effetto non è perfetto e offre le migliori prestazioni rendendo l'intera finestra non selezionabile. Potresti anche voler aggiungere
la cancellazione di alcuni dei tasti di scelta rapida (come Ctrl+ae Ctrl+c. Test: Cmd+a e Cmd+c)
anche, usando quella sezione della risposta di Vladimir sopra. (arriva al suo post qui )
Soluzione a 1 linea per CHROME:
body.style.webkitUserSelect = "none";
e FF:
body.style.MozUserSelect = "none";
IE richiede l'impostazione dell'attributo "non selezionabile" (dettagli in basso).
Ho provato questo in Chrome e funziona. Questa proprietà è ereditata, quindi impostandola sull'elemento body disabiliterai la selezione nell'intero documento.
Dettagli qui: http://help.dottoro.com/ljrlukea.php
Se stai usando Closure, chiama questa funzione:
goog.style.setUnselectable(myElement, true);
Gestisce tutti i browser in modo trasparente.
I browser non IE sono gestiti in questo modo:
goog.style.unselectableStyle_ =
goog.userAgent.GECKO ? 'MozUserSelect' :
goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
null;
Definito qui: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html
La parte IE viene gestita in questo modo:
if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
for (var i = 0, descendant; descendant = descendants[i]; i++) {
descendant.setAttribute('unselectable', value);
}
}
Penso che questo codice funzioni su tutti i browser e richieda il minimo sovraccarico. È davvero un ibrido di tutte le risposte di cui sopra. Fammi sapere se trovi un bug!
Aggiungi CSS:
.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}
Aggiungi jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
Facoltativo: per disabilitare la selezione anche per tutti gli elementi figlio, è possibile modificare il blocco IE in:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
Uso:
$('.someclasshere').disableSelection();
Una soluzione a questo, per i casi appropriati, è usare a <button>
per il testo che non vuoi essere selezionabile. Se stai vincolando l' click
evento su un blocco di testo e non vuoi che quel testo sia selezionabile, cambiarlo in un pulsante migliorerà la semantica e impedirà anche la selezione del testo.
<button>Text Here</button>
Il modo migliore e più semplice per trovarlo, impedisce ctrl + c, tasto destro. In questo caso ho bloccato tutto, quindi non devo specificare nulla.
$(document).bind("contextmenu cut copy",function(e){
e.preventDefault();
//alert('Copying is not allowed');
});