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

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

Ответ 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;
}

Ответ 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;
}

Ответ 3

Только одна заметка в ответе от Cleiton выше - образец кода, похоже, работает хорошо, но для того, чтобы быть хорошим гражданином в мире 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;
    }
});

Привет, надеюсь, что это будет полезно.

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 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, после изменения значений.
обратите внимание, что курсор все еще "я"...