Питання Як вимкнути підсвічування тексту?


Для якорів, які діють як кнопки (наприклад, Питання, Теги, Користувачіі т. д. у верхній частині сторінки перезавантаження стеку) або вкладок, чи є CSS стандартним способом відключити ефект підсвічування, якщо користувач випадково виділяє текст?

Я розумію, що це може бути зроблено за допомогою JavaScript, і невелика кількість кодування Google тільки для Mozilla -moz-user-select варіант

Чи існує стандартний спосіб це зробити за допомогою CSS, і якщо ні, то який підхід є "найкращою практикою"?


4360
2018-05-05 20:29


походження


елементи елементів у елементі відьма виділяють вимкнено, підсвічування включено в css у стилі чи атрибуті класу? або, іншими словами, чи є інші значення для -webkit-user-select ect. крім просто ніхто?
'user-select'- Значення: none | | текст | перемикати | елемент | елементи | все | успадкувати - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
uihacker.blogspot.com/2011/12/... - Enve
Пов'язані: stackoverflow.com/questions/16600479/... = як дозволити вибирати лише деякі з дочірніх елементів - JK.
У деяких браузерах існує помилка, де "Вибрати все" (CTRL + A і CMD + A) все-таки вибирає речі. Цьому можна боротися з прозорим кольором вибору: ::selection { background: transparent; } ::-moz-selection { background: transparent; } - DaAwesomeP


Відповіді:


ОНОВЛЕННЯ січень 2017 року:

Відповідно до Чи можу я використовувати, the user-select в даний час підтримується у всіх браузерах, крім Internet Explorer 9 та попередніх версій (але на жаль досі потрібен префікс постачальника).


Усі правильні варіанти CSS:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Зауважте, що це а нестандартна особливість (тобто не є частиною будь-якої специфікації). Не гарантується робота скрізь, і може бути відмінності в застосуванні між браузерами, і в майбутньому браузери можуть втратити підтримку для нього.


Більше інформації можна знайти в Документація Mozilla Developer Network.


6369
2017-12-05 11:45



Хороший код molokoloco: D, хоча я особисто залишався б непогано використати його, оскільки іноді вам можуть знадобитися різні значення для різних браузерів, і це залежить від JavaScript. Створення класу та додавання його до вашого елемента або застосування css до вашого типу елемента у вашому стилі-листі є досить кулею. - Blowsie
'user-select'- Значення: none | | текст | перемикати | елемент | елементи | все | успадкувати - w3.org/TR/2000/WD-css3-userint-20000216 - Blowsie
Насправді -O-user-select не реалізовано в Opera. Замість цього реалізується невидаваний атрибут IE. - Tim Down
Чомусь це просто не працювало в IE8, потім я додав <div onselectstart="return false;">до мого основного div. - robasta
це смішно! так багато різних способів зробити те ж саме. давайте зробимо новий стандарт для вибору користувача. ми називатимемо це standard-user-select. то ми не матимемо цих проблем. хоча для зворотної сумісності ми повинні також включати інших. так що тепер код стає -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ах, набагато краще. - Claudiu


У більшості браузерів це можна досягти за допомогою власних варіантів CSS user-select власність спочатку запропонований, а потім відмовився від CSS3 і зараз пропонується в Росії CSS UI Level 4:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Для IE <10 та Opera <15, вам потрібно буде використовувати unselectable атрибут елемента, який ви хочете бути невидаваним. Ви можете встановити це за допомогою атрибута в HTML:

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

На жаль, це властивість не успадковується, тобто ви повинні поставити атрибут у початковому тезі кожного елемента всередині <div>. Якщо це проблема, ви можете замість JavaScript використовувати це рекурсивно для нащадків елемента:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Оновлено 30 квітня 2014 року: Це переміщення дерева потрібно повторно запускати кожного разу, коли до дерева додано новий елемент, але з коментаря @Han здається, що можна уникнути цього додаючи a mousedown обробник подій, який встановлює unselectable на ціль події. Побачити http://jsbin.com/yagekiji/1 для подробиць.


Це все ще не охоплює всіх можливостей. Незважаючи на те, що не можна ініціювати вибір в елементах, які не можна вибирати, в деяких браузерах (наприклад, IE і Firefox), все одно неможливо уникнути вибору, які починаються до і закінчуються після елемента, який не можна вибирати, не виділяючи весь документ.


727
2017-11-13 16:05



ви повинні видалити селектор * з вашого прикладу, його дійсно ефективно, і там насправді немає необхідності використовувати його у вашому прикладі є? - Blowsie
@ Блоссі: Я так не думаю: у специфікації CSS 2 сказано, що *.foo і .foo точно еквівалентні (у другому випадку універсальний селектор (*) мається на увазі), так що забороняється браузерні примхи, я не бачу, що в тому числі * завдасть шкоди продуктивності. Це моя давня звичка включати в себе *, який я спочатку почав робити для читабельності: він явно наголошує, що автор має намір узгоджувати всі елементи. - Tim Down
Оооу після деякого подальшого читання, здається, * є лише неефективним при використанні його як ключа (правого селектора), тобто. незбагненний *. Додаткова інформація тут code.google.com/speed/page-speed/docs/... - Blowsie
Замість того, щоб використовувати class = "unselectable", просто використовуйте перемикач атрибутів [unselectable = "on"] {...} - Chris Calo
@Francisc: Ні. Як я вже говорив до Blowsie раніше в коментарях, це не робить точно ніякої різниці. - Tim Down


Рішення JavaScript для IE є

onselectstart="return false;"

165
2018-05-05 20:37



Не забувай про це ondragstart! - Mathias Bynens
ще одна річ тут. Якщо ви додаєте це до тіла, ви не зможете вибирати текст всередині текстових областей або вхідних полів в IE. Як я виправив це для IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; } - TheBrain
Це може бути доданий в якості атрибута за допомогою JQuery - $ ( «р») атр ( «onselectstart», «повернутися помилковим») Це був єдиний надійний спосіб для мене в IE8. - Matt
чому я маю використовувати javascript, коли у мене є декілька рішень CSS! .. - Abudayah
@ Абудія, тому що вони не працюють у старих версіях Internet Explorer? Це, як, повний пункт цієї відповіді. - Pekka 웃


До CSS 3 вибрати користувач майно стає доступним, ГекоОсновані браузери підтримують -moz-user-select власність, яку ви вже знайшли WebKit і Блінк-браузери підтримують -webkit-user-select власність

Це, звичайно, не підтримується браузерами, які не використовують двигун рендеринга Gecko.

Для цього не існує жодного "стандарту", який би відповідав би. Використання JavaScript - це варіант.

Справжнє питання полягає в тому, чому ви хочете, щоб користувачі не змогли виділити і, мабуть, скопіювати та вставити певні елементи? Я не натрапив на один раз, коли хотів не дозволяти користувачам висвітлювати певну частину мого веб-сайту. Кілька моїх друзів, після багатогодинного читання та написання коду, використовуватимуть функцію виділення як спосіб запам'ятати, де на сторінці вони були, або надання маркера, щоб їхні очі могли знати, де шукати наступне.

Єдине місце, яке я міг побачити, було корисним, якщо у вас є кнопки для форм, які не слід копіювати та вставляти, якщо користувач скопіював та вставив веб-сайт.


159
2018-05-24 21:24



Кнопки речі будуть саме моєю мотивацією. - Kriem
Ще однією причиною цього є клацання Shift, щоб вибрати кілька рядків у сітці чи таблиці. Ви не хочете, щоб виділити текст, ви хочете, щоб він вибирав рядки. - Gordon Tucker
Є також юридичні питання, де вміст Чужого даний час юридично перевидані, але пункт в ліцензії потрібно веб-видавці захисту тексту від легко копіювати і вставляти. Це змусило мене знайти це питання. Я не згоден з вимогою, але компанія, яку я підписую, юридично зобов'язується виконувати її таким чином. - Craig M
@CraigM Стиль CSS не зупиняє людину захоплення HTML-коду та його копіювання. Якщо ви хочете захистити ваш вміст, вам доведеться знайти кращі способи. - Agile Jedi
Високо інтерактивне веб-додаток з великою кількістю перетягування ... випадкове висвітлення є великою проблемою юзабіліті. - Marc Hughes


Якщо ви хочете вимкнути вибір тексту на все, окрім <p> елементи, ви можете зробити це в CSS (пильнуйте за -moz-none що дозволяє переопределити в суб-елементах, що дозволено в інших браузерах none):

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

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



Переконайтеся також, що ви також можете вибрати поля вводу: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; } - joshuadelange
Будьте дуже обережні щодо вимкнення очікувань інтерфейсу браузера на ВСІХ код, за винятком одного елемента. Як, наприклад, текст списку <li />? - Jason T Featheringham
Просто оновлення ... відповідно до MDN з Firefox 21 -moz-none і noneоднакові. - Kevin Fegan
Для цього ви можете додати курсор: за замовчуванням і курсор: текст відповідно:) - T4NK3R
Чудово! Це працює, спасибі! - Nam Nguyen


У вищенаведених рішеннях вибір вимикається, але користувач все ще вважає, що ви можете вибрати текст, оскільки курсор все ще змінюється. Щоб зберегти його статичним, вам доведеться встановити курсор CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Це зробить ваш текст повністю рівним, як це було б у настільній програмі.


111
2018-05-05 20:46



"Плоска" на відміну від чого? - kojow7


Ви можете це зробити в Firefox і Safari (також Chrome?)

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

101
2017-09-21 07:09



Я б не рекомендував це робити, тому що це не вирішує проблему; вимкнення вибору тексту - він просто приховує його. Це може призвести до поганої юзабіліті, тому що, якщо я перетягувати курсор навколо сторінки, я можу вибирати будь-який довільний текст, не знаючи його. Це може викликати всілякі дивні юзабіліті "помилки". - Keithamus
Не працює на PNG-зображеннях з прозорими областями: воно завжди буде виділено світло-блакитним ... Будь-який обхід? - AvL


Обхід для WebKit:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

Я знайшов це в прикладі CardFlip.


73
2017-11-11 19:53



Використовуючи transparent замість rgba також працює в Chrome 42 на Android. - Clint Pachl


Мені подобається гібридне рішення CSS + jQuery.

Щоб зробити всі елементи всередині <div class="draggable"></div> непередавана, використовуйте цей CSS:

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

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

І тоді, якщо ви використовуєте jQuery, додайте це всередині a $(document).ready() блок:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Я вважаю, що ви все ще хочете, щоб будь-які вхідні елементи були взаємопов'язаними, отже :not() псевдоперемикач. Ви могли б використовувати '*' замість того, якщо вам не подобається.

Застереження: IE9, можливо, не потрібна ця додаткова частина jQuery, тому ви можете додати перевірку версії там.


66
2018-05-01 11:36



Використовуйте -ms-user-select: none; (для IE10) і ваш jQuery "if" має бути таким: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera) - mhenry1384
Будьте обережні люди !!! Щоб вибрати його в Firefox, ви повинні використовувати його -moz-user-select: Normal; - Nicolas Thery
@nicholasthery w3.org/TR/2000/WD-css3-userint-20000216#user-select - Tom Auger
@ mhenry1384 jQuery.browser застаріла з версії 1.3 і була вилучена у версії 1.9 - api.jquery.com/jQuery.browser - WynandB
@Wynand Хороша точка. Але який тип "визначення функції" існує для визначення властивостей CSS? - Tom Auger