Есть ли способ сделать DIV недоступным?

112

Вот интересные вопросы CSS для вас!Есть ли способ сделать DIV недоступным?

У меня есть текстовое поле с прозрачным фоном, накладывающимся на некоторый ТЕКСТ, который я хотел бы использовать в качестве своего рода водяного знака. Текст большой и занимает большую часть текстового поля. Это выглядит хорошо, проблема в том, что пользователь нажимает на текстовое поле, вместо этого он иногда выбирает текст водяного знака. Я хочу, чтобы текст водяного знака никогда не выбирался. Я ожидал, что если в z-индексе что-то будет меньше, это будет невозможно, но браузеры, похоже, не заботятся о слоях z-index при выборе элементов. Есть ли уловка или способ сделать это, чтобы этот DIV никогда не был выбран?

источник

2009-05-29 Whozumommy

Вы были бы счастливы с решением javascript? – joshcomley

вы можете попробовать это:

<div onselectstart="return false">your text</div>

источник

2009-05-29 08:13:54 Fortega

До сих пор можно выбрать с двойным щелчком. – ceving

не просто фоновое изображение для текстового поля будет достаточно?

источник

2009-05-29 08:15:48 Joey

прозрачный 1x1 png должен работать, да –

Ну, я скорее имел в виду водяной знак, но прозрачное фоновое изображение могло бы работать. Также вы не должны плитку очень маленьких изображений, так как некоторые браузеры становятся в этом случае ужасно медленными :) – Joey

Тем более, что прозрачный png (или gif) 1000x1000 - всего 4kb. –

153

Я написал простое расширение jQuery для отключения выбора некоторое время назад: Disabling Selection in jQuery. Вы можете вызвать его через $('.button').disableSelection();

С другой стороны, с помощью CSS (кросс-браузер):

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

источник

2009-05-29 08:17:00 aleemb

отлично работает! user-select недействителен css. –

@kasperTaeymans благодарит за это. обновил фрагмент. – aleemb

Большое спасибо ... это сработало очень хорошо. – YAM

Как Johannes уже предложил, фон-изображение прочертовский лучший способ добиться этого в CSS в одиночку.

Решение для JavaScript также должно повлиять на «dragstart», чтобы быть эффективным во всех популярных браузерах.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

JQuery:

var _preventDefault = function(evt) { evt.preventDefault(); }; 
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Rich

источник

2009-05-29 08:22:36 kim3er

'onselectstart' не будет работать для FF или Opera. –

WebKit браузеров (например Google Chrome и Safari) имеют CSS решение, похожее на Mozilla, -moz-пользователь-выберите: не имеет

.no-select{  
    -webkit-user-select: none; 
    cursor:not-allowed; /*makes it even more obvious*/ 
}

источник

2010-12-11 11:30:19 James

Следующий код CSS работает почти в современном браузере:

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

Для IE вы должны использовать JS или атрибут insert в теге html.

<div id="foo" unselectable="on" class="unselectable">...</div>

источник

2011-04-07 13:37:08 KimKha

Какова цель 'unselectable =" on ". Можете ли вы дать ссылку, пожалуйста, – Medorator

Я нашел здесь: http://msdn.microsoft.com/en-us/library/hh801966(v=vs.85).aspx Но я действительно тестировал на IE, и он работает правильно. – KimKha

Это недопустимо HTML –

Также в IOS, если вы хотите избавиться от серых полупрозрачных наложений появляются ontouch, добавьте CSS:

-webkit-tap-highlight-color: rgba(0,0,0,0); 
-webkit-touch-callout: none;

источник

2013-04-17 08:31:11

Не работает приятель. – 2014-06-06 21:07:43

Просто обновление оригинальный, столь upvoted ответ aleemb с парой дополнений css.

Мы использовали следующие комбо:

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

Мы получили предложение для добавления записи WebKit-касании:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Апрель: Просто обновить свой ответ с которые могут пригодиться.Если вам нужно сделать DIV по выбору/неактивна на лету и готовы использовать Modernizr, следующие работы аккуратно в JavaScript:

var userSelectProp = Modernizr.prefixed('userSelect'); 
    var specialDiv = document.querySelector('#specialDiv'); 
    specialDiv.style[userSelectProp] = 'none';

источник

2014-07-18 18:06:20

Огромное спасибо. – kwoxer

Я также добавляю «указатель-события: нет» на все. – Kokodoko

применение 'user-select: none' к' div' не имеет никакого эффекта. я уверен, что 'user-select' предназначен только для текста. есть ли какие-либо другие способы сделать «div» неприемлемым? – Anthony

Вы можете использовать pointer-events: none; в вашем CSS

div { 
    pointer-events: none; 
}

источник

2014-11-23 07:02:45

Использование

onselectstart = "return false"

это предотвращает копирование вашего контента.

источник

2014-12-09 09:26:13 Anuraj

Это решение было опубликовано другими пользователями. – dazedconfused

Убедитесь, что вы задали позицию явно как абсолютную или относительную для z-индекса для выбора. У меня была аналогичная проблема, и это решило это для меня.

источник

2015-03-18 21:11:00

Не уверен в вашем случае использования, но вы можете сделать его перетаскиваемым.

источник

2016-07-02 16:53:12 Costa

Есть ли способ сделать DIV недоступным?

ответ

Смежные вопросы