jQuery - pilih semua teks dari textarea


130

Bagaimana saya bisa membuatnya jadi ketika Anda mengklik di dalam textarea, seluruh kontennya akan dipilih?

Dan akhirnya ketika Anda mengklik lagi, untuk membatalkan pilihan.



5
@Blender: Tidak, pertanyaan itu menyangkut menyoroti teks dalam suatu elemen, bukan textarea. Keduanya sangat berbeda.
Tim Down

Jawaban:


194

Untuk menghentikan pengguna dari jengkel ketika seluruh teks dipilih setiap kali mereka mencoba untuk memindahkan tanda sisipan menggunakan tetikus mereka, Anda harus melakukan ini menggunakan focusacara, bukan clickacara. Berikut ini akan melakukan pekerjaan dan mengatasi masalah di Chrome yang mencegah versi paling sederhana (yaitu hanya memanggil metode textarea select()di focuspengendali acara) agar tidak berfungsi.

jsFiddle: http://jsfiddle.net/NM62A/

Kode:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

versi jQuery:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

10
Saya pikir lebih baik untuk mengimplementasikan hal ini menggunakan tombol "pilih semua teks" yang terpisah karena secara otomatis memilih teks pada fokus atau acara klik benar-benar menjengkelkan.
RobG

2
ini gagal untuk saya di Chrome, solusi yang berfungsi adalah: stackoverflow.com/a/6201757/126600
zack

@ zack: Contoh jsFiddle dalam jawaban ini cocok untuk saya di Chrome. Bukankah itu untukmu? Saya setuju jawaban yang Anda tautkan lebih mudah.
Tim Down

@TimDown: Anda benar, saya sedikit terlalu bersemangat - sebenarnya itu berfungsi dengan benar pada 'klik', tetapi gagal jika Anda tabmasuk ke textarea - solusi Anda yang lain berfungsi untuk kedua kasus :)
zack

Ubah kode di atas sedikit dan itu akan berfungsi seperti pesona .. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); Anda perlu merujuk kotak teks tanpa menggunakan thishanya merujuknya dengan path lengkap .. dan itu akan bekerja ..
pratikabu

14

Cara yang lebih baik, dengan solusi untuk masalah tab dan chrome dan cara jquery baru

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

11

Saya akhirnya menggunakan ini:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

tapi saya tidak tahu bagaimana memeriksa apakah teks sudah dipilih, jadi saya dapat membalikkan dua tindakan :(
Alex

1
@ Alex: Saya tidak akan terlalu banyak mengacaukan ini jika saya adalah Anda. Pengguna mengharapkan perilaku standar dari textareas.
Tim Down

tidak, textarea khusus ini hanya untuk copy-paste. semua teks yang saya miliki di dalamnya adalah string terenkripsi besar yang hanya bisa diganti seluruhnya, atau disalin ke clipboard
Alex

@ Alex: Ah, benar. Anda mungkin ingin membuatnya hanya-baca dengan menambahkan readonlyatribut itu.
Tim Down

1
@ Hollister: Tidak, sangat mungkin bagi pengguna atau skrip untuk memilih konten dalam div. Anda mungkin berpikir untuk menyalin ke clipboard, yang tidak mungkin dilakukan dalam skrip tanpa pustaka berbasis Flash seperti ZeroClipboard.
Tim Down

6
$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

Versi jQuery yang sedikit lebih pendek:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Ini menangani kasus sudut Chrome dengan benar. Lihat http://jsfiddle.net/Ztyx/XMkwm/ untuk contoh.


4

Memilih teks dalam suatu elemen (mirip dengan menyorot dengan mouse Anda)

:)

Dengan menggunakan jawaban yang diterima pada pos itu, Anda dapat memanggil fungsi seperti ini:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

Mungkin menandai pertanyaan ini sebagai duplikat yang mungkin lebih bermanfaat? Itu bukan jawaban Anda, jadi lebih baik menggabungkan dua pertanyaan.
Blender

Setuju - Meskipun OP dapat memanfaatkan penjelasan tambahan untuk implementasinya. :)
Todd

Pertanyaan itu menyangkut menyoroti teks dalam suatu elemen, bukan sebuah textarea. Keduanya sangat berbeda.
Tim Down

terima kasih, saya mengetahui bahwa saya dapat melakukan ini dengan $(this).select(), saya akan menggunakannya karena lebih sedikit kode :)
Alex
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.