Hapus Pilihan Teks dengan JavaScript

123

Pertanyaan sederhana yang tidak dapat saya temukan jawabannya: bagaimana saya dapat menggunakan JavaScript (atau jQuery) untuk membatalkan pilihan teks apa pun yang mungkin dipilih pada halaman web? Pengguna EG mengklik dan menyeret untuk menyorot sedikit teks - Saya ingin memiliki fungsi deselectAll () yang menghapus pilihan ini. Bagaimana saya harus mulai menulisnya?

Terima kasih untuk bantuannya.

man1
sumber

Jawaban:

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

Penghargaan untuk Tuan Y.

Gert Grenander
sumber
4
Ini mengasumsikan bahwa keberadaan document.selectionmenyiratkan keberadaan empty()metode itu. Anda telah menguji metode dalam setiap kasus lain, jadi Anda mungkin juga menguji emptydalam kasus terakhir juga.
Tim Down
Gunakan ini dalam plugin jquery.tableCheckbox.js saya , terima kasih.
Marco Kerwitz
1
Saya telah membuat contoh kerja lengkap berdasarkan saran Anda tetapi menambahkan beberapa tambahan jsfiddle.net/mkrivan/hohx4nes Baris yang paling penting adalah window.getSelection (). AddRange (document.createRange ()); Tanpa IE ini tidak membatalkan pilihan teks dalam beberapa kondisi. Dan saya telah mengubah urutan metode deteksi.
Miklos Krivan
Anda menyelamatkan hari saya teman saya! Saya menggunakan scratchpad dan ketika menggaruk seluruh halaman dipilih dan dengan skrip yang bagus ini saya membatalkan pilihan halaman saya sebelum menggunakan plugin scratchpad. Pada dasarnya itu berhasil! Terima kasih banyak!
Gabungkan
1
Saya fount yang window.getSelection().removeAllRanges();berfungsi dengan baik di IE (edge) dan Safari.
Chili
48

Terbaik untuk menguji fitur yang Anda inginkan secara langsung:

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

State of De-selection Affairs 2014

Saya melakukan penelitian sendiri. Inilah fungsi yang saya tulis dan saya gunakan hari ini:

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

Pada dasarnya, getSelection().removeAllRanges()saat ini didukung oleh semua browser modern (termasuk IE9 +). Ini jelas merupakan metode yang benar untuk maju.

Masalah kompatibilitas diperhitungkan:

  • Versi lama Chrome dan Safari digunakan getSelection().empty()
  • IE8 dan di bawahnya digunakan document.selection.empty()

Memperbarui

Mungkin ide yang bagus untuk menyelesaikan fungsionalitas pemilihan ini untuk digunakan kembali.

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

Saya telah membuat wiki komunitas ini sehingga Anda sekalian dapat menambahkan fungsionalitas pada ini, atau memperbarui berbagai hal seiring perkembangan standar.

ChaseMoskal
sumber
7
Itu sama dengan jawaban saya. Tidak ada yang berubah dalam 4 tahun.
Tim Down
3
Mengerikan. Anda tidak hanya mencuri implementasi dari poster lain, tetapi Anda benar-benar menghancurkannya secara sintaksis.
kamelkev
1

Inilah jawaban yang diterima, tetapi dalam dua baris kode:

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

Satu-satunya pemeriksaan yang tidak saya lakukan adalah untuk keberadaan removeAllRanges - tetapi AFAIK tidak ada browser yang memiliki salah satu window.getSelectionatau document.selectiontetapi tidak memiliki .emptyatau .removeAllRangesuntuk properti itu.

Grinn
sumber
0

window.getSelection () memungkinkan Anda mengakses teks yang dipilih, dari sana, ada beberapa hal yang dapat Anda lakukan untuk memanipulasinya ..

Baca Selengkapnya: Pilihan Pengembang Mozilla DOM

Zuul
sumber
-1

tambahkan ini ke skrip Anda untuk mencegah klik kanan dan pemilihan teks.

Pengecualian dapat ditambahkan ke 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;}
pengguna2180104
sumber