Предотвратить выделение текстовой таблицы

Question

У меня есть таблица, и я разрешаю пользователям "выбирать" несколько строк. Все это обрабатывается с использованием событий jQuery и некоторого CSS, чтобы визуально указать, что строка "выбрана". Когда пользователь нажимает клавишу Shift, можно выбрать несколько строк. Иногда это вызывает выделение текста. Есть ли способ предотвратить это?

Answer 1

Для этого есть свойство CSS3.

#yourTable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 2

Если вы хотите контролировать, когда ваши пользователи могут выбирать или не включать части вашего сайта, вы можете использовать этот маленький плагин jQuery.

jQuery.fn.extend({ 
        disableSelection : function() { 
                return this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        jQuery(this).css('user-select', 'none'); 
                        jQuery(this).css('-o-user-select', 'none'); 
                        jQuery(this).css('-moz-user-select', 'none'); 
                        jQuery(this).css('-khtml-user-select', 'none'); 
                        jQuery(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
}); 

и использовать его как:

// disable selection on #theDiv object
$('#theDiv').disableSelection(); 

В противном случае вы можете просто использовать эти атрибуты CSS внутри вашего файла CSS как:

#theDiv
 {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 3

Только одна заметка на ответ от Клитона выше - пример кода, кажется, работает хорошо, но для того, чтобы быть хорошим гражданином в мире jQuery, вы должны вернуть объект jQuery в конце функции, чтобы он был цепным - простой добавление в одну строку исправляет это:

jQuery.fn.extend({
    disableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() { return false; };
                    this.unselectable = "on";
                    jQuery(this).css('-moz-user-select', 'none');
            });
            return this;
    }
});

Ура, надеюсь, это полезно.

Answer 4

Я просто удаляю выделение, сделанное с помощью клавиши Shift. Это может показать небольшое мерцание, хотя

if (event.shiftKey) {
    window.getSelection().removeAllRanges()
}

Answer 5

Вы можете попробовать с помощью функции focus() выделенного текста - выбор исчезнет.

$('#someEl').focus();

Answer 6

Если у вас есть Jquery UI на ваших страницах, просто используйте

    $("element-selector").disableSelection();

Answer 7

::-moz-selection { /* Code for Firefox */  
    color: black;  
    background: none;
}

::selection {  
    color: black;  
    background: none;  
}  

с http://www.w3schools.com/cssref/sel_selection.asp
фактически из раздела try-it, после изменения значений.
заметьте, что курсор все еще имеет форму "я"...