Как отключить выбор текста с помощью CSS или JavaScript?

Question

Можно создать дубликат:
CSS rule to disable text selection highlighting

Я делаю HTML/CSS/JQuery галереи, с несколькими страницами.

У меня действительно есть «следующая» кнопка, которая представляет собой простую связь с прослушивателем jQuery.

Проблема в том, что если пользователь несколько раз нажимает кнопку, выбирается текст кнопки, а затем полная строка текста. В моем действительно мрачном дизайне это действительно уродливо и бессмысленно.

Итак, вот мой вопрос: Можете ли вы отключить выбор текста в HTML? Если нет, то я буду очень мисс вспышки и ее высокий уровень конфигурации на TextFields ...

Answer 1

<div 
style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
unselectable="on" 
onselectstart="return false;" 
onmousedown="return false;"> 
    Blabla 
</div> 

Answer 2

Я не уверен, если вы можете отключить его, но вы можете изменить цвета него :)

myDiv::selection, 
myDiv::-moz-selection, 
myDiv::-webkit-selection { 
    background:#000; 
    color:#fff; 
} 

Тогда просто соответствуют цветам на ваш «черномазый» дизайн и посмотреть, что происходит :)

Answer 3

вы можете использовать JavaScript, чтобы сделать то, что вы хотите:

if (document.addEventListener !== undefined) { 
    // Not IE 
    document.addEventListener('click', checkSelection, false); 
} else { 
    // IE 
    document.attachEvent('onclick', checkSelection); 
} 

function checkSelection() { 
    var sel = {}; 
    if (window.getSelection) { 
     // Mozilla 
     sel = window.getSelection(); 
    } else if (document.selection) { 
     // IE 
     sel = document.selection.createRange(); 
    } 

    // Mozilla 
    if (sel.rangeCount) { 
     sel.removeAllRanges(); 
     return; 
    } 

    // IE 
    if (sel.text > '') { 
     document.selection.empty(); 
     return; 
    } 
} 

Мыльная коробка: Вы действительно не должны завинчиваться с помощью пользовательского агента клиента таким образом. Если клиент хочет выбрать вещи в документе, они должны иметь возможность выбирать вещи в документе. Неважно, вам не нравится цвет подсветки, потому что вы не тот, кто просматривает документ.

Answer 4

Попробуйте этот код CSS для кросс-браузерной совместимости.

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

Answer 5

UPDATE января 2017 года:

Согласно Can I use, то 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 documentation.