Как я могу отключить подсветку в HTML или JS? - PullRequest
23 голосов
/ 04 августа 2009

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

Ответы [ 6 ]

19 голосов
/ 04 августа 2009

Вы можете использовать селектор псевдокласса CSS ::selection и ::-moz-selection для Firefox.

Например:

::-moz-selection {
    background-color: transparent;
    color: #000;
}

::selection {
    background-color: transparent;
    color: #000;
}

.myclass::-moz-selection,
.myclass::selection { ... }
8 голосов
/ 04 апреля 2012

Решение CSS3:

user-select: none;
-moz-user-select: none;

Существует также префикс веб-набора для выбора пользователя, но он делает невозможным фокусирование на некоторых полях формы (это может быть временная ошибка), так что вы можете пойти свместо этого следующий псевдокласс для webkit:

element::selection
5 голосов
/ 04 августа 2009

Я полагаю, что вы имеете в виду выделение текста (например, перетаскивание мыши, чтобы выделить). Если это так, это отменит действие выбора в IE и Mozilla:

window.onload = function() {
  if(document.all) {
      document.onselectstart = handleSelectAttempt;
  }
  document.onmousedown = handleSelectAttempt;
}

function handleSelectAttempt(e) {
    var sender = e && e.target || window.event.srcElement;
    if(isInForm(sender)) {
        if (window.event) {
            event.returnValue = false;
        }
        return false;
    }
    if (window.event) {
        event.returnValue = true;
    }
    return true;
}

function isInForm = function(element) {
    while (element.parentNode) {
        if (element.nodeName.ToUpperCase() == 'INPUT'
            || element.nodeName.ToUpperCase() == 'TEXTAREA') {
            return true;
        }
        if (!searchFor.parentNode) {
            return false;
        }
        searchFor = searchFor.parentNode;
    }
    return false;
}
0 голосов
/ 04 августа 2009

Если ваша конечная цель состоит в том, чтобы сделать копирование и вставку текста более трудным, Javascript и CSS не являются правильной технологией, потому что вы не можете отключить функцию просмотра источника браузера.

Некоторые другие идеи (ни одна из них не идеальна):

  • Java-апплет (вы управляете как отображением, так и поиском текста)
  • то же самое в другом плагине для браузера (flash, silverlight и т. Д.)
  • серверные образы (низкая производительность)
0 голосов
/ 04 августа 2009

Вы имеете в виду выделение текста при наведении на него мыши?

Лучший способ сделать это - использовать свойство CSS3, называемое :: selection, однако, будучи CSS3, оно пока не поддерживается. Идите и посмотрите, иначе, возможно, есть способ сделать это с помощью Javascript.

0 голосов
/ 04 августа 2009

Я думаю, вы ищете псевдокласс: focus. Попробуйте это:

input:focus {
  background-color: #f0f;
}

Это даст вашему входу довольно фиолетовый / розовый цвет при выборе.

Я не уверен, какие свойства вы должны (не) установить, но я думаю, что вы можете узнать сами, используя метод проб и ошибок.

Также обратите внимание, что выделение или его отсутствие зависит от браузера!

...