Apakah ada fungsi untuk membatalkan pilihan semua teks menggunakan JavaScript?

100

Apakah ada fungsi dalam javascript untuk membatalkan pilihan semua teks yang dipilih? Saya pikir itu harus menjadi fungsi global yang sederhana document.body.deselectAll();atau semacamnya.

javascript selection NoodleOfDeath
sumber

Jawaban:

166

Coba ini:

function clearSelection()
{
 if (window.getSelection) {window.getSelection().removeAllRanges();}
 else if (document.selection) {document.selection.empty();}
}

Ini akan menghapus pilihan dalam konten HTML biasa di browser utama mana pun. Ini tidak akan menghapus pilihan di input teks atau <textarea>di Firefox.

Ankur
sumber
25
Saya dapat mengonfirmasi bahwa itu window.getSelection().removeAllRanges();berfungsi di semua browser saat ini. Demo langsung: jsfiddle.net/hWMJT/1
Šime Vidas
Anda harus mengklik tombol seperti <input id = 'but' type = 'button' value = 'click' / onclick = 'clearSelection ()'>
Ankur
1
@ Šime - tidak juga. Ini "berfungsi" karena pilihan hilang saat tombol mendapatkan fokus. Bukti - kode dikomentari, pemilihan masih dihapus.
Shadow Wizard adalah Ear For You
@Shadow Berikut adalah demo yang tepat: jsfiddle.net/9spL8/3 The removeAllRanges()Metode bekerja di semua browser saat ini untuk teks di dalam paragraf atau elemen non-bentuk-bidang yang sama. Untuk bidang formulir (seperti area teks), metode ini tidak berfungsi di IE9 dan FF5.
Šime Vidas
1
Diedit, gunakan window.getSelection().removeAllRanges(); dulu karena sesuai dengan standar, kode kepemilikan harus selalu dieksekusi terakhir . Baik itu tahun 2004 atau kode yang memenuhi standar 4004 pada akhirnya akan selalu menjadi apa yang kami gunakan jadi deteksi dulu tanpa kecuali!
Yohanes
27

Berikut adalah versi yang akan menghapus semua pilihan, termasuk dalam input teks dan area teks:

Demo: http://jsfiddle.net/SLQpM/23/

function clearSelection() {
    var sel;
    if ( (sel = document.selection) && sel.empty ) {
        sel.empty();
    } else {
        if (window.getSelection) {
            window.getSelection().removeAllRanges();
        }
        var activeEl = document.activeElement;
        if (activeEl) {
            var tagName = activeEl.nodeName.toLowerCase();
            if ( tagName == "textarea" ||
                    (tagName == "input" && activeEl.type == "text") ) {
                // Collapse the selection to the end
                activeEl.selectionStart = activeEl.selectionEnd;
            }
        }
    }
}
Tim Down
sumber
tidak berfungsi jika pilihan Anda dimulai di suatu tempat dari baris pertama dan mencakup bidang teks yang lebih besar
Vyachaslav Gerchicov
1
@VyachaslavGerchicov: Itu mungkin karena ini adalah contoh sederhana yang dibuat dengan cepat dan jika Anda mengakhiri pilihan di luar utama <div>maka mouseupacara tidak akan aktif. Letakkan penangan mouseup pada dokumen sebagai gantinya dan itu akan baik-baik saja: jsfiddle.net/SLQpM/23
Tim Down
Ini adalah solusi yang bagus di browser lama yang tidak mendukung CSS pilihan pengguna saat menyeret elemen. Panggil clearSelection () di callback gerakan mouse.
Geordie
6

Untuk Internet Explorer, Anda dapat menggunakan metode kosong dari objek document.selection:

document.selection.empty ();

Untuk solusi lintas-browser, lihat jawaban ini:

Hapus pilihan di Firefox

Luke Girvin
sumber
Jika situs web Anda bersifat publik (bukan intranet tempat Anda mengontrol browser), itu bukan ide yang baik, ini bukan lintas browser.
Shadow Wizard adalah Ear For You
1
@Shadow Wizard - benar, pertanyaan ini mungkin relevan untuk solusi lintas-browser: stackoverflow.com/questions/6186844/…
Luke Girvin
@ Luke bagus, sayang sekali bahwa situs web lain akan (mungkin) tidak konsisten di antara browser yang berbeda karena OP mengambil apa yang Anda berikan apa adanya.
Shadow Wizard adalah Ear For You
Menurut pendapat saya kompatibilitas browser adalah sesuatu yang jelas harus ditawarkan oleh kami - banyak pengembang bahkan tidak menyadari perbedaan seperti itu, jadi mereka yang tahu harus memberi tahu mereka. Selain ini, saya tidak pernah mengatakan pertanyaan Anda salah , hanya hilang .
Shadow Wizard adalah Ear For You
@ Luke hanyadocument.selection.clear() berfungsi di IE. Lihat di sini: jsfiddle.net/9spL8/4 Selain itu, metode ini akan menghapus teks yang dipilih, bukan hanya membatalkannya. Untuk membatalkan pilihan teks, gunakan saja. document.selection.empty()
Šime Vidas
0

Untuk textareaelemen dengan setidaknya 10 karakter, berikut ini akan membuat pilihan kecil dan kemudian setelah satu setengah detik batal pilih:

var t = document.getElementById('textarea_element');
t.focus();
t.selectionStart = 4;
t.selectionEnd = 8;

setTimeout(function()
{
 t.selectionStart = 4;
 t.selectionEnd = 4;
},1500);
John
sumber