Как отключить выделение текста в элементах на странице

Решение для Internet Explorer на JavaScript будет следующим:

onselectstart="return false;"

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

Если вы хотите отключить выделение текста на всех элементах, кроме <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;
}

Таким образом, настройте общие правила для всех элементов и специфические правила для <p>, чтобы разрешить выделение текста только на этих элементах.

В ответах на предыдущие вопросы упоминается, что выбор текста останавливается, но пользователь все равно может подумать, что текст можно выбрать, потому что курсор продолжает меняться. Чтобы сделать курсор статическим, вам нужно установить его с помощью 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>
  Текст, который можно выделять.
</p>
<p class="noselect">
  Текст, который нельзя выделять.
</p>

Такой подход сделает ваш текст совершенно "плоским", как это было бы в настольном приложении.

Вам нужно использовать CSS для изменения цвета выделения текста в браузерах. Вы можете сделать это следующим образом:

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

Этот код работает в Firefox и Safari. Для Chrome код тоже будет функционировать, так как он поддерживает стандартный селектор ::selection. Тем не менее, если вам необходимо, чтобы стиль выделения применялся более широко, вам может потребоваться добавить дополнительные стили для других браузеров, если они это поддерживают.

Чтобы сделать все элементы внутри <div class="draggable"></div> невыбираемыми, вы можете использовать следующий CSS:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-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, добавьте следующий код в блок $(document).ready():

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

Я предполагаю, что вы хотите, чтобы элементы ввода оставались доступными для взаимодействия, поэтому используется псевдоселектор :not(). Если вам всё равно, можно использовать '*' вместо этого.

Обратите внимание: для Internet Explorer 9 этот дополнительный код на jQuery, возможно, не понадобится, так что вы можете добавить проверку версии.