input jquery pilih semua pada fokus

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.

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

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

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/

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

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

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

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

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/

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.

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

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

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

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 ...

Bekerja sangat baik dengan JavaScript asli select().

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

atau secara umum:

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

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

Anda dapat menggunakan kode sederhana:

$('#idname').select();

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

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