JavaScript ile Metin Seçimini Temizle


123

Cevabını bulamadığım basit soru: Bir web sayfasında seçilebilecek herhangi bir metnin seçimini kaldırmak için JavaScript'i (veya jQuery'yi) nasıl kullanabilirim? EG kullanıcı, bir parça metni vurgulamak için tıklar ve sürükler - Bu seçimi temizleyen deselectAll () işlevine sahip olmak istiyorum. Nasıl yazmalıyım?

Yardım için teşekkürler.

Yanıtlar:


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

Sayın Y'ye Kredi


4
Bu document.selection, varlığının bir empty()yönteminin varlığını ima ettiğini varsayar . Diğer her durumda yöntemi test ettiniz, bu nedenle emptyson durumda da test edebilirsiniz .
— Tim Down

Bunu jquery.tableCheckbox.js eklentimde kullandım, teşekkürler.
— Marco Kerwitz

1
Önerinize dayalı olarak tam bir çalışma örneği oluşturdum ama bazı ekstralar ekledim jsfiddle.net/mkrivan/hohx4nes En önemli satır window.getSelection (). AddRange (document.createRange ()); Bu IE olmadan bazı koşullarda metnin seçimini kaldırmaz. Ve yöntem tespitinin sırasını değiştirdim.
— Miklos Krivan

Günümü kurtardın dostum! Scratchpad kullanıyordum ve tüm sayfayı çizerken seçildi ve bu iyi komut dosyasıyla Scratchpad eklentisini kullanmadan önce sayfamın seçimini kaldırdım. Temelde işe yarıyor! Çok teşekkürler!
— birleştirin

1
window.getSelection().removeAllRanges();IE (edge) ve Safari'de iyi çalışan çeşme var .
— Şili

48

Doğrudan istediğiniz özellikleri test etmek için en iyisi:

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

15

Seçimden Çıkarma İşleri 2014

Kendi kendime biraz araştırma yaptım. İşte bugünlerde yazdığım ve kullandığım işlev:

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

Temel olarak, getSelection().removeAllRanges()şu anda tüm modern tarayıcılar (IE9 + dahil) tarafından desteklenmektedir. Bu açıkça ilerleyen doğru yöntemdir.

Uyumluluk sorunları şunları hesaba katar:

  • Chrome ve Safari'nin eski sürümleri kullanıldı getSelection().empty()
  • IE8 ve altı kullanıldı document.selection.empty()

Güncelleme

Yeniden kullanım için bu seçim işlevini tamamlamak muhtemelen iyi bir fikirdir.

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

Bunu bir topluluk wiki'si yaptım, böylece sizler buna işlevsellik ekleyebilir veya standartlar geliştikçe bir şeyleri güncelleyebilirsiniz.


7
Bu benim cevabımla aynı şeyi yapıyor. 4 yılda hiçbir şey değişmedi.
— Tim Down

3
Korkunç. Sadece uygulamayı başka bir posterden çalmakla kalmadınız, aynı zamanda sözdizimsel olarak tamamen çöpe attınız.
— kamelkev

1

İşte kabul edilen cevap, ancak iki satır kodla:

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

Sadece removeAllRanges varlığı içindir ben yapmıyorum kontrol - ama AFAIK ya sahip hiçbir tarayıcı yok window.getSelectionya document.selectionama olmaz var ya bir .emptyya .removeAllRangesbu özellik için.



-1

sağ tıklamayı ve metin seçimini önlemek için bunu komut dosyanıza ekleyin.

Var 'om' için istisnalar eklenebilir.

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;}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.