javascript: Отключить выбор текста

85

Я использую javascript, чтобы отключить выделение текста на моем веб-сайте.

Код такой:

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

Похожий скрипт можно найти здесь

На моем локальном хосте: все браузеры (Firefox, Chrome, IE и Safari) отлично работают.

На моем Live сайте: все в порядке, ЗА ИСКЛЮЧЕНИЕМ Firefox.

Мои вопросы:

  1. Есть ли у кого-нибудь предложение относительно того, почему Firefox по-разному ведет себя для живого сайта и локального хоста. Примечание. Javascript включен.

  2. Возможно, мой сценарий слишком упрощен, поэтому я пробовал следующее с ТОЧНО ЖЕ РЕЗУЛЬТАТАМИ

арпеджио
источник
4
Позвольте мне предложить вам избегать использования Javascript в этом случае. Просто используйте CSS, вы можете найти больше информации о выделении текста в CSS в этом вопросе
RienNeVaPlu͢s
Второй сценарий, вероятно, слишком старый. Удалите!
Document.all,
9
Я ненавижу сайты, делающие это. Если я хочу скопировать какой-то текст, я могу открыть инструменты разработчика и скопировать его в любом случае. Это просто ненужное неудобство.
uylmz
4
Точно так, как говорит Рик. Не делайте этого, если у вас нет для этого веской причины. Многие люди могут просто выбрать что-то для поиска или воспользоваться словарем для поиска слова. Запрещение этого - просто раздражение, которое в долгосрочной перспективе может оттолкнуть людей от вашего сайта.
Чехнология
1
Во-первых, я также ненавижу страницы, которые запрещают выбор (текст и еще много чего) просто для "удовольствия", но я думаю, что это хороший вопрос, поскольку есть несколько законных причин, по которым кто-то хочет отключить его ( например , для реализации жестов мыши или перетащите блоки текста в любую игру). Конечно, использование JS для достижения этой цели - это плохо, но решение CSS также имеет свои проблемы (в некоторых браузерах user-selectсамо по себе не работает, требуется префикс «-vendor-», например, -moz-user-selectи -webkit-user-select, таким образом, чтобы он работал , необходимо установить все возможные варианты none).
Cyberknight

Ответы:

211

Просто используйте этот метод css:

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Вы можете найти тот же ответ здесь: Как отключить выделение выделения текста с помощью CSS?

Закрип
источник
7
Также добавьте ссылку, по которой вы нашли этот ответ: stackoverflow.com/questions/826782/…
Рон ван дер Хейден,
Большое спасибо. CSS в теле работал во всех случаях, кроме IE. Есть ли изящное решение CSS для решения этой проблемы и для IE? Теперь я использую комбинацию Js и CSS, чтобы охватить все браузеры !! спасибо
арпеджио
1. Почему этот ответ не был отмечен как решение? ... Он решает проблему наиболее точным и простым способом. 2. Следует отметить, что это определение CSS может быть реализовано на любом элементе HTML, а не только на BODY.
TheCuBeMan
1
@TheCuBeMan «user-select» - нестандартная функция, и поэтому IMO не является лучшим решением.
ndugger
1
Вероятно, это лучший подход - браузеры обрабатывают это по-разному, потому что это сложно и у всех есть разные варианты. А именно, они хотят предоставить предполагаемый UX (без выбора), в то же время позволяя пользователю выбирать, действительно ли он этого хочет . В черновике W3C больше примечаний, и caniuse показывает фантастическую поддержку. Это нормально, что браузеры обрабатывают это по-другому - пользователь получит тот же опыт, что и предпочитаемый им браузер.
Шон Эркхарт
26

Я пишу элемент управления слайдером, чтобы обеспечить функцию перетаскивания, это мой способ предотвратить выбор содержимого при перетаскивании пользователем:

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

привязать startDragк своему дому:

<button onmousedown="startDrag">...</button>

Если вы хотите статически отключить выделение текста для всех элементов, выполните код при загрузке элементов:

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

      
И Фэн Се
источник
2
Это лучшее решение, потому что решение CSS не работает для блоков div с contenteditableатрибутом (например, если вы хотите отключить выделение текста во время изменения размера элемента управления мышью пользователя).
mbomb007
11

Для JavaScript используйте эту функцию:

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

чтобы включить выбор, используйте это:

function reEnable() {return true}

и используйте эту функцию где угодно:

document.onclick = reEnable
Хасан Азими
источник
За исключением того, new Function (return false)что это недействительный код javascript. Используйте просто document.onselectstart = disableselect.
amik
@amik, как насчет этого: document.oncontextmenu = new Function("return false;");или этого с использованием CSS:<body onselectstart="return false">
Hassan Azimi
Да new Function("return false;"), сработает, но это излишне сложно по сравнению с тем, disableselectчто у вас уже есть. onselectstart="return false"тоже будет работать, но не имеет ничего общего с CSS. Также я заметил, что остальная часть вашего ответа тоже неверна - reEnableфункция вообще не работает.
amik
@amik, ха-ха, в JavaScript ничего не нужно, но мы все еще делаем это. Конечно, код можно реорганизовать, но взгляните на вопрос, ответ, ответ на вопрос, а не домашнее задание.
Hassan Azimi
Что ж, но SO - это место для обучения, поэтому я считаю, что давать ответ, который является технически неправильным, и вообще не объяснять, не очень хорошая идея.
amik
4

Если у вас есть такая html-страница:

    <тело
    onbeforecopy = "вернуть ложь"
    ondragstart = "вернуть ложь" 
    onselectstart = "вернуть ложь" 
    oncontextmenu = "вернуть ложь" 
    onselect = "document.selection.empty ()" 
    oncopy = "document.selection.empty ()">

Есть простой способ отключить все события:

document.write(document.body.innerHTML)

Вы получили html-контент и потеряли другие вещи.

вскоре
источник
4

Можно также использовать, работает нормально во всех браузерах, требуется javascript:

onselectstart = (e) => {e.preventDefault()}

Пример:

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }
Select me!


Еще одна альтернатива js, путем тестирования поддержки и отключения CSS userSelectили MozUserSelectдля Firefox.

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"
Select me!


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

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}
<div>Select me!</div>

NVRM
источник
0

Просто Скопируйте этот текст и поставьте перед </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
Хасан Шейх
источник