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



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



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

473   5  

5 ответов:

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();
}

кредит господину Y.

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

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}

состояние дел с отбором 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();

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

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

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 для этого свойства.

Comments

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