Очистить выделение текста с помощью JavaScript

123

Простой вопрос, на который я не могу найти ответа: как я могу использовать JavaScript (или jQuery), чтобы отменить выбор любого текста, который может быть выбран на веб-странице? Пользователь EG щелкает и перетаскивает, чтобы выделить немного текста - я хочу, чтобы функция deselectAll () очищала этот выбор. Как мне это написать?

Спасибо за помощь.

man1
источник

Ответы:

207
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

Кредит г-ну Ю.

Герт Гренандер
источник
4
Это предполагает, что существование document.selectionподразумевает существование empty()метода этого. Вы протестировали этот метод во всех остальных случаях, так что можете проверить и emptyв последнем случае.
Tim Down
Использовал это в моем плагине jquery.tableCheckbox.js , спасибо.
Марко Кервиц,
1
Я создал полный рабочий пример на основе вашего предложения, но добавил некоторые дополнения jsfiddle.net/mkrivan/hohx4nes Самая важная строка - window.getSelection (). AddRange (document.createRange ()); Без этого IE в некоторых случаях не отменяет выделение текста. И я изменил порядок обнаружения метода.
Миклош Криван
Ты спас мне день, друг мой! Я использовал блокнот и когда царапал всю страницу, и с помощью этого хорошего скрипта я отменил выбор своей страницы перед использованием плагина блокнота. В принципе работает! Большое спасибо!
Объединить
1
Я установил, что window.getSelection().removeAllRanges();отлично работает в IE (Edge) и Safari.
Чили
49

Лучше всего протестировать нужные вам функции напрямую:

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}
Тим Даун
источник
15

Состояние дел по отмене отбора, 2014 г.

Я провел собственное исследование. Вот функция, которую я написал и использую сейчас:

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

По сути, getSelection().removeAllRanges()в настоящее время поддерживается всеми современными браузерами (включая IE9 +). Очевидно, что это правильный метод продвижения вперед.

Учтены проблемы совместимости:

  • Использованы старые версии Chrome и Safari getSelection().empty()
  • IE8 и ниже используются document.selection.empty()

Обновить

Вероятно, неплохо было бы завершить эту функцию выбора для повторного использования.

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

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

оборота ChaseMoskal
источник
7
Это то же самое, что и мой ответ. Ничего не изменилось за 4 года.
Тим Даун,
3
Какой ужас. Вы не только буквально украли реализацию у другого постера, но и полностью испортили ее синтаксически.
kamelkev
1

Вот принятый ответ, но в двух строках кода:

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

Только проверить , я не делаю это для существования removeAllRanges - но AFAIK нет браузера , который имеет либо window.getSelectionили , document.selectionно не имеет либо .emptyили .removeAllRangesдля этого свойства.

Гринн
источник
0

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

Подробнее: выбор разработчика Mozilla DOM

Zuul
источник
-1

добавьте это в свой скрипт, чтобы предотвратить щелчок правой кнопкой мыши и выделение текста.

Исключения можно добавлять в var 'om'.

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}
user2180104
источник