input jquery pilih semua pada fokus


327

Saya menggunakan kode ini untuk mencoba dan memilih semua teks di bidang ketika pengguna berfokus pada bidang. Yang terjadi adalah, ia memilih semua untuk sesaat, kemudian tidak dipilih dan kursor pengetikan dibiarkan di mana saya mengklik ...

$("input[type=text]").focus(function() {
   $(this).select();
});

Saya ingin semuanya tetap terpilih.


Browser apa, sepertinya berfungsi baik untuk saya di FF?
R0MANARMY

8
Chrome = gagal untuk yang satu ini
wowo_999

1
Saya menggunakan Chrome, tetapi .click () menyelesaikan masalah :)
Tim

4
Catatan: Jawaban yang diterima di sini hanya menyelesaikan setengah dari masalah. Itu membuat pilih bekerja, tetapi membuatnya sulit untuk kemudian un-pilih dengan klik berikutnya. Solusi yang lebih baik dapat ditemukan di sini: stackoverflow.com/questions/3380458/…
SDC

Jawaban:


481

Coba gunakan clicksebagai ganti focus. Tampaknya berfungsi untuk acara mouse dan acara utama (setidaknya di Chrome / Mac):

jQuery <versi 1.7:

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery versi 1.7+:

$("input[type='text']").on("click", function () {
   $(this).select();
});

Ini demo


62
masalahnya adalah Anda tidak dapat lagi memilih bagian teks dengan mouse, setelah klik terjadi, teks lengkap dipilih.
Helin Wang

6
Bukan solusi yang layak untuk saya. Ini menciptakan masalah yang dijelaskan oleh Wang.
Marquez

1
Ada solusi di bawah ini oleh Nianpeng yang bekerja juga dengan pemilihan teks mouse.
Philibert Perusse

4
@AwQiruiGuo $ .fn.on ('klik', ..) dapat menggunakan lebih sedikit memori dan berfungsi untuk elemen anak yang ditambahkan secara dinamis.
Ricky Boyce

7
Ini tidak berfungsi untuk memfokuskan bidang saat tab.
Colin Breame

65

Saya pikir yang terjadi adalah ini:

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

Solusinya mungkin memanggil select () secara tidak sinkron, sehingga berjalan sepenuhnya setelah fokus ():

$("input[type=text]").focus(function() { 
    var save_this = $(this);
    window.setTimeout (function(){ 
       save_this.select(); 
    },100);
});

3
$ ("input [type = text]"). fokus (function () {var save_this = $ (this); window.setTimeout (function () {save_this.select ();}, 100);});
etienne

@etienne: Oh, bagus: penanganannya thisagak tak terduga dalam lingkup seperti itu. Saya akan memperbarui kodenya.
Piskvor meninggalkan gedung

3
nilai batas waktu 0 tampaknya ok juga, dan fungsi "focusin ()" juga bekerja dengan metode ini.
Tanguy

4
ya, Anda bahkan tidak perlu menetapkan titik. 0 akan baik-baik saja karena batas waktu berjalan di akhir tumpukan panggilan saat ini. ini berarti bahwa fokus dan klik acara semua kebakaran, dan kemudian fungsi Anda berjalan
Joshua Bambrick

1
Timeout 0 tampaknya memiliki masalah sehingga acara 'klik' dapat diaktifkan dalam bingkai yang lebih baru, membatalkan pilihan kotak lagi. Saya menemukan bahwa timeout 10 tampaknya bekerja dengan cukup baik - tidak ada penundaan yang nyata, tetapi lebih dapat diandalkan daripada 0.
philh

57

Saya pikir ini solusi yang lebih baik. Tidak seperti hanya memilih dalam acara onclick, itu tidak mencegah memilih / mengedit teks dengan mouse. Ia bekerja dengan mesin rendering utama termasuk IE8.

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/


4
Ini hanya berfungsi untuk bidang yang ada, berikut ini adalah pembaruan untuk mengikatnya ke bidang masukan baru: jsfiddle.net
adriaan

Terkadang fokus dapat diberikan tanpa klik, dan ini menanganinya dengan baik. Karena itu, ini bagi saya adalah jawaban terbersih - meskipun mungkin ada beberapa pendengar acara yang menggantung setiap kali input difokuskan dan bukan dengan klik ... jauh lebih baik daripada setTimeout
ilovett

Ini tidak memungkinkan klik kedua dalam input numerik untuk memilih bagian lain dari teks dengan mouse. Menghapus yang kedua select()tampaknya berhasil.
dperish

Bahkan lebih baik dengan tambahan$('input[autofocus]').select();
Daniel Bleisteiner

38

Ada beberapa jawaban yang layak di sini dan @ user2072367 adalah favorit saya, tetapi memiliki hasil yang tidak terduga ketika Anda fokus melalui tab daripada melalui klik. (hasil yang tidak terduga: untuk memilih teks secara normal setelah fokus melalui tab, Anda harus mengklik satu kali tambahan)

Biola ini memperbaiki bug kecil itu dan juga menyimpan $ (ini) dalam variabel untuk menghindari seleksi DOM yang berlebihan. Saksikan berikut ini! (:

Diuji dalam IE> 8

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

2
+1 solusi Anda dan @ user2072367 adalah yang terbersih di seluruh utas ini dan saya berharap ada cara untuk mendapatkan ke atas lebih cepat.
KyleMit

1
Bahkan berfungsi jika pengguna mencoba untuk memilih semua teks sendiri, bravo.
Vitani

Bagi saya ini tidak bekerja pada ie11 pada windows 8.1. Itu bekerja di ie11 pada windows 7 dan pada windows 10
Lars Thomas Bredland

1
@ LarsThomasBredland Saya baru saja mencoba win 8.1 + ie11 dan berfungsi seperti yang diharapkan. Apa yang "tidak berhasil" untuk Anda?
animatedgif

Itu hanya tidak memilih apa pun. (Saya menguji pada win8 lain dan itu bekerja di sana - tingkat os yang sama dan versi yaitu)
Lars Thomas Bredland

21

Setelah ditinjau dengan cermat, saya mengusulkan ini sebagai solusi yang jauh lebih bersih dalam utas ini:

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){      
        $(this).off("click.a keyup.a").select();
    });
});

Demo di jsFiddle

Masalah:

Berikut sedikit penjelasannya:

Pertama, mari kita lihat urutan peristiwa saat Anda mengarahkan mouse ke tab bidang.
Kami dapat mencatat semua peristiwa yang relevan seperti ini:

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

acara fokus

Catatan : Saya telah mengubah solusi ini untuk digunakan clickdaripada mouseupseperti yang terjadi kemudian di pipeline acara dan tampaknya menyebabkan beberapa masalah di firefox sesuai komentar @ Jocie

Beberapa browser mencoba memposisikan kursor selama mouseupatau clickacara. Ini masuk akal karena Anda mungkin ingin memulai tanda sisipan dalam satu posisi dan menyeret untuk menyorot beberapa teks. Itu tidak dapat membuat penunjukan tentang posisi caret sampai Anda benar-benar mengangkat mouse. Jadi fungsi yang ditangani focusditakdirkan untuk merespons terlalu dini, meninggalkan browser untuk mengganti posisi Anda.

Tapi intinya adalah kita benar-benar ingin menangani acara fokus. Ini memberi tahu kami saat pertama kali seseorang memasuki bidang. Setelah itu, kami tidak ingin terus mengesampingkan perilaku pemilihan pengguna.

Solusinya:

Alih-alih, di dalam focuspengendali acara, kami dapat dengan cepat melampirkan pendengar untuk acara click(klik di) dan keyup(tab di) yang akan diaktifkan.

Catatan : Kuncian acara tab akan benar-benar diaktifkan di bidang input baru, bukan yang sebelumnya

Kami hanya ingin memecat acara sekali. Kita bisa menggunakan .one("click keyup), tetapi ini akan memanggil event handler sekali untuk setiap jenis acara . Sebagai gantinya, segera setelah mouse atau keyup ditekan, kami akan memanggil fungsi kami. Hal pertama yang akan kami lakukan, adalah menghapus handler untuk keduanya. Dengan begitu, tidak masalah apakah kita melakukan tab atau mous. Fungsi tersebut harus dijalankan tepat sekali.

Catatan : Sebagian besar browser secara alami memilih semua teks selama acara tab, tetapi seperti yang ditunjukkan animasigif , kami masih ingin menangani keyupacara tersebut, jika tidak mouseupacara tersebut akan tetap ada kapan pun kami tab. Kami mendengarkan keduanya sehingga kami dapat mengubah dari pendengar segera setelah kami memproses seleksi.

Sekarang, kita dapat menelepon select()setelah browser melakukan pemilihan sehingga kami yakin untuk menimpa perilaku default.

Akhirnya, untuk perlindungan ekstra, kita dapat menambahkan ruang nama acara ke mouseupdan keyupfungsinya sehingga .off()metode ini tidak menghapus pendengar lain yang mungkin sedang bermain.


Diuji dalam IE 10+, FF 28+, & Chrome 35+


Atau, jika Anda ingin memperpanjang jQuery dengan fungsi yang disebut onceyang akan memunculkan tepat sekali untuk sejumlah acara :

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

Kemudian Anda dapat menyederhanakan kode lebih lanjut seperti ini:

$("input").focus(function(){
    $(this).once("click keyup", function(e){      
        $(this).select();
    });
});

Demo di biola


Di Firefox 31 pada Windows kode Anda hanya memilih teks pada setiap klik lain ketika Anda mengklik di antara dua kotak teks
Vitani

1
@ Jocie, saya tidak yakin mengapa itu berganti-ganti, tapi sepertinya FF menangani pemilihan teks dalam clickacara yang lebih jauh dari pipa mouseup. Karena kami ingin menangani akhir pemilihan selambat mungkin untuk memberi kami kesempatan paling besar untuk mengesampingkan peramban, menggunakan klik sebagai ganti mouseup harus melakukan trik. Diuji dalam FF, Chrome, dan IE.
KyleMit

1
Terima kasih! Akhirnya solusi yang benar-benar berfungsi dan di semua browser!
Vincent

1
Iya! Ini juga bekerja untuk saya! Terima kasih. Ini seharusnya menjadi jawaban resmi
Fandango68

1
@RiZKiT, onetidak akan memotongnya sebagai "Pawang dieksekusi sekali per elemen per jenis peristiwa . Secara otomatis akan mematikan acara yang memecatnya, tetapi yang lain masih akan tetap ada, dan offmenangani keduanya. Lihat saya pertanyaan: fungsi yang akan memecat tepat sekali untuk sejumlah acara
KyleMit

13

Ini akan melakukan pekerjaan dan menghindari masalah bahwa Anda tidak dapat lagi memilih bagian dari teks dengan mouse.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

1
Penting untuk menjaga kemampuan memilih bagian teks dengan mouse. Saya menggunakan ini dan A1
Philibert Perusse

2
Terlalu banyak yang terjadi di sini, gunakan solusi fokus /
George

@George user2072367's cukup bagus, tetapi memiliki beberapa kelemahan serius. Lihat solusi saya (:
animatedgif

6

Versi ini berfungsi pada iOS dan juga memperbaiki drag-to-select standar pada windows chrome

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX) 
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/


Diedit untuk menambahkan percobaan / tangkapan yang jelek untuk menenangkan browser
anihilnine

5

Masalah dengan sebagian besar solusi ini adalah bahwa mereka tidak berfungsi dengan benar ketika mengubah posisi kursor dalam bidang input.

The onmouseupevent perubahan posisi kursor dalam bidang, yang dipecat setelah onfocus(setidaknya dalam Chrome dan FF). Jika Anda membuang tanpa syarat mouseupmaka pengguna tidak dapat mengubah posisi kursor dengan mouse.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

Kode secara kondisional akan mencegah mouseupperilaku default jika bidang saat ini tidak memiliki fokus. Ini berfungsi untuk kasus ini:

  • mengklik ketika bidang tidak fokus
  • mengklik ketika bidang fokus
  • tab ke bidang

Saya telah menguji ini dalam Chrome 31, FF 26 dan IE 11.


Ini berfungsi sempurna untuk acara klik, tetapi jika saya menggunakan tab untuk pindah ke bidang input berikutnya, saya melihat bahwa konten akan dipilih dan tidak dipilih kemudian
ToX 82

4

Menemukan solusi hebat membaca utas ini

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

... yang pada dasarnya jawaban yang sama dengan Piskvor .
Oliver

jangan lupakan semua jenis teks HTML5 lainnya, mis. 'input [type = email]'
jamiebarrow

3

Saya berasal dari akhir 2016 dan kode ini hanya berfungsi di versi terbaru jquery (jquery-2.1.3.js dalam kasus ini).

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

2

saya menggunakan FF 16.0.2 dan jquery 1.8.3, semua kode dalam jawaban tidak bekerja.
Saya menggunakan kode seperti ini dan berfungsi.

$("input[type=text]").focus().select();

4
Ini tidak menjawab pertanyaan, yaitu bagaimana memilih isi kotak input saat pengguna memfokuskan bidang . Ini akan segera fokus dan memilih kode, tanpa input pengguna.
bernilai

@ nilai saya tidak mengerti apa yang Anda maksud? apa yang penanya inginkan adalah ketika dia memilih bidang, semua teks saat ini dipilih. Dan kode saya harus melakukan itu. Saya bahkan menggunakannya untuk proyek saya, sebagai waktu ketika saya menulis jawaban ini.
GusDeCooL

1
Kode ini akan fokus dan memilih semua saat dijalankan, tetapi kode itu sendiri tidak terikat dengan peristiwa yang dibuat pengguna , seperti mengklik kotak teks. Misalnya, $("input[type=text]").on('click', function () { $(this).focus.select(); })menyebabkan fokus dan pemilihan terjadi ketika pengguna mengklik kotak, karena dijalankan ketika pengguna mengklik kotak. Tanpa event handler, kode tidak menjawab pertanyaan, karenanya downvote dan komentar. Pada dasarnya, Anda mendapatkan bagian "semua teks saat ini dipilih" tetapi bukan bagian "ketika ia memilih bidang".
bernilai

1
@GusDeCooL cukup lucu (meskipun ini tidak persis apa yang dia minta) Saya ingin hasil yang sama seperti yang Anda lakukan pada ini :)
Robbie Averill

2
var timeOutSelect;
$("input[type=text]").focus(function() { 
        var save_this = $(this);
        clearTimeout(timeOutSelect);
        timeOutSelect = window.setTimeout (function(){ 
                save_this.select(); 
        }, 100);
});

Gunakan clearTimeout untuk keamanan lebih jika Anda beralih dengan cepat di antara dua input .. clearTimeout membersihkan waktu lama ...


Harap edit dengan informasi lebih lanjut. Jawaban khusus kode dan "coba ini" tidak disarankan, karena tidak mengandung konten yang dapat ditelusuri, dan jangan jelaskan mengapa seseorang harus "coba ini". Kami berusaha di sini untuk menjadi sumber pengetahuan.
Brian Tompsett - 汤 莱恩

2

Bekerja sangat baik dengan JavaScript asli select().

$("input[type=text]").focus(function(event) {
   event.currentTarget.select();
});

atau secara umum:

$("input[type=text]")[0].select()

1

Atau Anda bisa menggunakan <input onclick="select()">Works perfect.


tidak, tidak. ini berfungsi untuk memilih keseluruhan. tetapi cobalah untuk memilih bagian dari teks secara manual, Anda tidak akan dapat melakukannya.
Sujay Phadke


0
<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

Ini mungkin akan ditandai sebagai jawaban berkualitas rendah karena tidak memiliki penjelasan tentang apa yang terjadi.
tumultous_rooster

Anda $.readysalah. Anda harus melewati fungsi untuk membuatnya menunda attrsampai dokumen siap. Anda melakukannya segera lalu meneruskan koleksi elemen ke $.ready.
doug65536

Juga, hindari 'onclick', terutama dengan cara ini. Gunakan addEventListener.
doug65536

0

Saya selalu menggunakan requestAnimationFrame()untuk melompati mekanisme post-event internal dan ini bekerja dengan sempurna di Firefox. Belum diuji di Chrome.

$("input[type=text]").on('focus', function() {
    requestAnimationFrame(() => $(this).select());
});
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.