Comment désactiver la sélection de texte à l'aide de jQuery?
Est-ce que jQuery ou jQuery-UI ont une fonctionnalité permettant de désactiver la sélection de texte pour des éléments de document donnés?
Dans jQuery 1.8, cela peut être fait comme suit:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
Si vous utilisez l'interface utilisateur jQuery, il existe une méthode pour cela, mais elle ne peut gérer que la sélection de la souris (c'est-à-dire CTRL+A travaille toujours):
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
Le code est vraiment simple, si vous ne voulez pas utiliser l'interface utilisateur de 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; });
J'ai trouvé cette réponse très utile ( Empêcher la surbrillance du tableau de texte ), et peut-être peut-elle être combinée à une autre façon de fournir la compatibilité IE.
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Voici une solution plus complète pour la sélection de déconnexion et l’annulation de certaines touches de raccourci (telles que Ctrl+a et Ctrl+c. Test: Cmd+a et 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);
et appelez exemple:
$(':not(input,select,textarea)').disableSelection();
Cela pourrait également ne pas suffire pour les anciennes versions de FireFox (je ne sais pas laquelle). Si tout cela ne fonctionne pas, ajoutez ce qui suit:
.on('mousedown', false)
Les éléments suivants désactiveraient la sélection de l'élément de toutes les classes dans tous les navigateurs courants (IE, Chrome, Mozilla, Opera et 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");
});
Ceci peut facilement être fait en utilisant JavaScript Ceci est applicable à tous les navigateurs
<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>
appel de cette fonction
<script type="text/javascript">
disableSelection(document.body)
</script>
C'est en fait très simple. Pour désactiver la sélection de texte (et cliquer + glisser-déposer (un lien dans Chrome, par exemple)), utilisez simplement le code jQuery suivant:
$('body, html').mousedown(function(event) {
event.preventDefault();
});
Tout cela évite que la valeur par défaut ne se produise lorsque vous cliquez avec votre souris (mousedown()) dans les balises body et html. Vous pouvez très facilement changer l'élément en changeant simplement le texte entre les deux guillemets (par exemple, changez $('body, html') en $('#myUnselectableDiv') pour rendre la div myUnselectableDiv div indéfinissable.
Un extrait pour vous montrer/prouver ceci:
$('#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>Veuillez noter que cet effet n'est pas parfait et donne les meilleurs résultats tout en empêchant la sélection de la fenêtre entière. Vous voudrez peut-être aussi ajouter
l’annulation de certaines touches de raccourci (telles que Ctrl+a et Ctrl+c. Test: Cmd+a et Cmd+c)
de même, en utilisant cette partie de la réponse de Vladimir ci-dessus. (se rendre à son poste ici )
Je pense que ce code fonctionne sur tous les navigateurs et nécessite le moins de temps système. C'est vraiment un hybride de toutes les réponses ci-dessus. Faites-moi savoir si vous trouvez un bug!
Ajouter 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;}
Ajouter jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
Facultatif: pour désactiver également la sélection de tous les éléments enfants, vous pouvez remplacer le bloc IE par:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
tilisation:
$('.someclasshere').disableSelection();
Solution 1 ligne pour CHROME:
body.style.webkitUserSelect = "none";
et FF:
body.style.MozUserSelect = "none";
IE nécessite de définir l'attribut "Unselectable" (détails en bas).
J'ai testé cela dans Chrome et cela fonctionne. Cette propriété étant héritée, sa définition dans l'élément body désactivera la sélection dans l'ensemble de votre document.
Détails ici: http://help.dottoro.com/ljrlukea.php
Si vous utilisez Closure, appelez simplement cette fonction:
goog.style.setUnselectable(myElement, true);
Il gère tous les navigateurs de manière transparente.
Les navigateurs non-IE sont gérés comme suit:
goog.style.unselectableStyle_ =
goog.userAgent.GECKO ? 'MozUserSelect' :
goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
null;
La partie IE est gérée comme ceci:
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);
}
}
J'ai essayé toutes les approches, et celle-ci est la plus simple pour moi car j'utilise IWebBrowser2 et je n'ai pas 10 navigateurs à gérer:
document.onselectstart = new Function('return false;');
Fonctionne parfaitement pour moi!
Une solution à cela, dans les cas appropriés, consiste à utiliser un <button> pour le texte que vous ne souhaitez pas pouvoir sélectionner. Si vous vous liez à l'événement click sur un bloc de texte et que vous ne voulez pas que ce texte soit sélectionnable, le changer pour qu'il devienne un bouton améliorera la sémantique et empêchera également la sélection du texte.
<button>Text Here</button>