Как отключить выделение текста с помощью CSS или JavaScript? [дубликат]




Возможные Дубликаты:
правило CSS для отключения выделения текста






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



У меня действительно есть кнопка "Далее", которая является простой ссылкой на прослушиватель щелчка jQuery.



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



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

616   5  

5 ответов:

<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>

обновление январь, 2017:

По данным могу ли я использовать на 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.

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

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

вы можете использовать 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;
    }
}

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

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

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

тогда просто сопоставьте цвета с вашим" темным " дизайном и посмотрите, что произойдет:)

Comments

    Ничего не найдено.