Очистити вибір тексту за допомогою JavaScript


122

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

Дякую за допомогу.

Відповіді:


206
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в остаточному випадку.
Тім Даун

Використовував це в моєму плагіні jquery.tableCheckbox.js , дякую.
Марко Кервіц

1
Я створив повний робочий приклад на основі вашої пропозиції, але додав додаткові додатки jsfiddle.net/mkrivan/hohx4nes Найважливішим рядком є ​​window.getSelection (). AddRange (document.createRange ()); Без цього IE не скасовує вибір тексту в деяких умовах. І я змінив порядок виявлення методу.
Міклош Криван

Ти врятуєш мій день мій друже! Я використовував скретчпад, і при подряпині було вибрано всю сторінку, і за допомогою цього хорошого сценарію я знімаю виділення своєї сторінки перед тим, як використовувати плагін "Скретчпад". В основному це працює! Дуже дякую!
Поєднайте

1
Я вважаю, що це window.getSelection().removeAllRanges();чудово працює в IE (край) і Safari.
чилі

48

Найкраще перевірити потрібні функції безпосередньо:

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

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


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для цієї властивості.



-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;}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.