2010-11-30 2 views
11

Как я могу сделать некоторые части моего html недоступными?Как я могу сделать некоторые части моего html недоступными?

У меня есть некоторые абсолютно позиционированные divs, которые продолжают выбираться, если пользователь пытается выбрать содержимое моей страницы.

Есть ли способ сделать так, чтобы определенные элементы (такие как те div) не были выбраны?

EDIT: Основная проблема заключается в том, что кто-то копирует эти абсолютные div, а затем вставляет их в текстовый редактор на моем сайте, редактор текстового редактора разбивается на IE.

+0

возможно связанный с этим вопрос: HTTP: // StackOverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable – 2010-11-30 02:10:16

+0

Предлагаемое ниже решение jQuery выглядит многообещающим, если оно не сработает для вас, не должно быть сложно что-то построить с чистым JavaScript, просто дайте нам знать. :) – 2010-11-30 08:33:15

ответ

4

Если вы хотите просто скрыть прямоугольник выделения, вы можете использовать

element::selection { background: transparent } 

и это аналог для Gecko

element::-moz-selection { background: transparent } 

Если вы хотите, чтобы помочь пользователям выбрать правильный текст, чтобы скопировать в буфер обмена, вы можете перемещать элемент. Обычно браузеры сохраняют порядок элементов, как они определены в HTML при выборе. Хотя это не идеальное решение, вы можете поместить код элемента в HTML либо в самом начале, либо в очень конце тега <body>. Таким образом, если пользователь выбирает что-то в середине страницы, элемент будет слишком «далеко», чтобы вмешиваться.

3

Вы можете использовать ::selection псевдо-элемент, чтобы сделать выбор определенного элемента «невидимым»:

p::selection { background-color:transparent; } 
p::-moz-selection { background-color:transparent; } 

Однако, что не работает в IE.

+0

, но они будут поддерживать его в IE9! – 2010-11-30 02:05:10

9

Для IE добавьте атрибут unselectable="ON". (EDIT: Хотя это не поможет)

Для Gecko добавьте стиль CSS -moz-user-select: none.

Для WebKit добавьте стиль CSS -webkit-user-select: none.

+0

Пробовал `unselectable =" ON ", и это не сработало. Чтение MSDN говорит: «Элемент с атрибутом UNSELECTABLE, установленным для включения, может быть включен в выборку, которая начинается где-то вне элемента.» Таким образом, он по-прежнему непреднамеренно выбирается при попытке скопировать область содержимого. – Kyle 2010-11-30 02:10:39

+0

+1 Отлично! И неселективный атрибут работает и в Opera. – 2010-11-30 02:13:12

4

эта статья может помочь с решением кроссбраузерной: (использует JQuery) http://aleembawany.com/2009/01/20/disable-selction-on-menu-items-with-this-jquery-extension/

в теории, вы можете расширить ядро ​​Jquery с помощью этого:

jQuery.fn.extend({ 
    disableSelection : function() { 
      return this.each(function() { 
        this.onselectstart = function() { return false; }; 
        this.unselectable = "on"; 
        jQuery(this).addClass('unselectable'); 
      }); 
    } 
}); 

и применяя его, как это:

// disable selection on selected objects 
$('.myClass').disableSelection(); 

вы должны убедиться, что у вас есть это в таблице стилей:

.unselectable { 
    user-select: none; 
    -o-user-select: none; 
    -moz-user-select: none; 
    -khtml-user-select: none; 
    -webkit-user-select: none; 
} 

выглядит так, как будто в основном делает то, что SLaks и Sime упомянули. я не пробовал, но я бы интересно узнать, работает ли он

2

JQuery Решение:

$(".unselectable").disableSelection();