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

Question

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

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

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

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

Answer 3

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

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 4

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

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

Answer 5

Только одна ноты на ответе от Клейтона выше - пример кода, кажется, работает хорошо, но для того, чтобы быть хорошим гражданином в мире 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 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
фактически из раздела примерки его, после изменения значения.
Обратите внимание, что курсор все еще «I» ...