Как отключить выделение текста с помощью jQuery?
Имеет ли jQuery или jQuery-UI какие-либо функции для отключения выделения текста для заданных элементов документа?
13 ответов
В jQuery 1.8 это можно сделать следующим образом:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
Если вы используете jQuery UI, для этого есть метод, но он может обрабатывать только выбор мыши (т. Е. CTRL+A все еще работает):
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
Код действительно прост, если вы не хотите использовать jQuery UI:
$(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; });
Я нашел этот ответ ( Prevent Highlight of Text Table) наиболее полезным, и, возможно, его можно объединить с другим способом обеспечения совместимости с IE.
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
Вот более полное решение для выбора отключения и отмены некоторых горячих клавиш (таких как Ctrl+a и Ctrl+c. Test:Cmd+a и 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);
и назовите пример:
$(':not(input,select,textarea)').disableSelection();
Этого также может быть недостаточно для старых версий Firefox (я не могу сказать, какие именно). Если все это не работает, добавьте следующее:
.on('mousedown', false)
Следующее действие отключило бы выбор всех элементов item во всех распространенных браузерах (IE, Chrome, Mozilla, Opera и Safari):
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
Это на самом деле очень просто. Чтобы отключить выделение текста (а также нажать + перетаскивание текста (например, ссылку в Chrome)), просто используйте следующий код jQuery:
$('body, html').mousedown(function(event) {
event.preventDefault();
});
Все, что это делает, это предотвращает возникновение по умолчанию, когда вы щелкаете мышью (mousedown()) в body а также html теги. Вы можете очень легко изменить элемент, просто изменив текст между двумя кавычками (например, изменить $('body, html') в $('#myUnselectableDiv') сделать myUnselectableDiv div, ну, в общем, невыбираемый
Небольшой фрагмент, чтобы показать / доказать это вам:
$('#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>Пожалуйста, обратите внимание, что этот эффект не идеален и работает лучше всего, в то время как все окно недоступно для выбора. Вы также можете добавить
отмена некоторых из горячих клавиш (таких как Ctrl+a и Ctrl + c. Test: Cmd + a и Cmd + c)
также, используя этот раздел ответа Владимира выше. (зайдите на его пост здесь)
$(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");
});
Это легко сделать с помощью JavaScript. Это применимо ко всем браузерам.
<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>
Вызов этой функции
<script type="text/javascript">
disableSelection(document.body)
</script>
Я испробовал все подходы, и этот самый простой для меня, потому что я использую IWebBrowser2 и у меня нет 10 браузеров, с которыми приходится бороться:
document.onselectstart = new Function('return false;');
У меня отлично работает!
Я думаю, что этот код работает во всех браузерах и требует наименьших затрат. Это действительно гибрид всех вышеперечисленных ответов. Дайте мне знать, если найдете ошибку!
Добавить 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;}
Добавить jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
Необязательно: Чтобы отключить выбор для всех дочерних элементов, вы можете изменить блок IE на:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
Использование:
$('.someclasshere').disableSelection();
1 линия решение для ХРОМА:
body.style.webkitUserSelect = "none";
и FF:
body.style.MozUserSelect = "none";
IE требует установки атрибута unselectable (подробности внизу).
Я проверил это в Chrome, и он работает. Это свойство наследуется, поэтому установка его в элементе body отключит выделение во всем документе.
Подробности здесь: http://help.dottoro.com/ljrlukea.php
Если вы используете Closure, просто вызовите эту функцию:
goog.style.setUnselectable(myElement, true);
Он обрабатывает все браузеры прозрачно.
Браузеры без IE обрабатываются так:
goog.style.unselectableStyle_ =
goog.userAgent.GECKO ? 'MozUserSelect' :
goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
null;
Определено здесь: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html
Часть IE обрабатывается так:
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);
}
}
Одним из решений этого в соответствующих случаях является использование <button> для текста, который вы не хотите выбирать. Если вы привязаны к click событие в некотором текстовом блоке, и вы не хотите, чтобы этот текст был выбираемым; изменение его на кнопку улучшит семантику, а также предотвратит выделение текста.
<button>Text Here</button>
Лучший и самый простой способ, которым я нашел это, предотвращает Ctrl + C, щелкните правой кнопкой мыши. В этом случае я заблокировал все, поэтому мне не нужно ничего указывать.
$(document).bind("contextmenu cut copy",function(e){
e.preventDefault();
//alert('Copying is not allowed');
});