Pilih semua isi kotak teks ketika menerima fokus (Vanilla JS atau jQuery)


311

Apa yang dimaksud dengan solusi Vanilla JS atau jQuery yang akan memilih semua konten kotak teks ketika kotak teks menerima fokus?



3
@gdoron untuk beberapa alasan yang menautkan pengalihan ke pertanyaan ini sendiri.
Destrictor


Masalah dengan sebagian besar solusi ini adalah bahwa mereka tidak berfungsi dengan benar ketika mengubah posisi kursor dalam bidang input. Lihatlah jawaban saya di sini: stackoverflow.com/a/20826207/641452
Colin Breame

Jawaban:


370
$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

23
Juga hanya untuk info tambahan: "input [type = text]" sekarang dapat menjadi "input: teks" salam
Ricardo Vega

8
Ini sepertinya tidak berfungsi untuk saya di Chrome dan situs web jQuery mengatakan itu tergantung pada browser. Adakah yang bisa memverifikasi?
Kenny Wyland

71
Sepertinya browser WebKit mengganggu ini karena peristiwa mouseup. Saya menambahkan ini dan berhasil: $ ('input: text'). Mouseup (fungsi (e) {return false;});
Kenny Wyland

5
Kenny benar, tetapi sayangnya 'mouseup' juga memengaruhi kontrol pemintal Chrome. Memicu 'klik' daripada 'fokus' tampaknya menyelesaikannya
Richard Kennard

24
Saya menggunakan seperti ini: $ ("input: text"). Select (). Focus ();
Phuong

227

<input type="text" onfocus="this.select();" onmouseup="return false;" value="test" />


43
+ onmouseup = "return false" untuk berhenti batalkan pilihan pada klik
Anthony Johnston

2
+1 untuk beberapa jenis stopEvent untuk mouseup, atau ini tidak bekerja dengan andal. Kelemahan dari melakukan itu adalah bahwa begitu kursor berada di lapangan, mengklik di suatu tempat di dalam teks yang dipilih untuk memposisikan kursor di sana tidak bekerja; klik secara efektif dinonaktifkan. Namun, untuk situasi di mana memilih seluruh teks pada fokus diinginkan, itu mungkin lebih rendah dari dua kejahatan.
enigment

Saya bisa menyelesaikan masalah yang diangkat oleh enigment dengan menetapkan variabel global doMouseUp ke false, selama acara onMouseDown, jika ini! = Document.activeElement. Kemudian, selama onMouseUp, setel ulang doMouseUp ke true dan kembalikan nilai doMouseUp sebelum Anda meresetnya. Ini semakin berbelit-belit dan membutuhkan kode - Saya akan memposting jawaban yang menjelaskannya dengan lebih baik.
Travis

1
JANGAN menambahkan onmouseup="return false;"jika Anda ingin pengguna dapat dengan bebas memilih dan mengedit teks setelah fokus di dalam kotak teks. Dengan kode ini, teks akan dikunci ke dalam situasi "pilih semua" dan pengguna tidak akan dapat mengeditnya kecuali jika pengguna mengetikkan teks baru atau menggunakan tombol panah untuk bergerak. Jujur ini terasa seperti perilaku yang sangat aneh dan tidak masuk akal kecuali kotak teks dimaksudkan untuk secara permanen tidak dapat diedit (dan karenanya dinonaktifkan).
ADTC

1
Secara teknis, Anda tidak perlu onmouseup="return false;"jika Anda hanya ingin seleksi terjadi ketika pengguna pertama kali mengklik atau tab. Dan +1 untuk javascript vanilla!
clabe45

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

3
Dikonfirmasi Jawaban terpilih / diterima tertinggi saat ini tampaknya tidak berfungsi untuk Chrome.
Aron Boyette

39
$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

1
Ini bagus. Terima kasih! Komentar oleh enigment ke jawaban Zach memberikan satu kelemahan dari mencegah default mouseupacara: "begitu kursor berada di lapangan, mengklik di suatu tempat di dalam teks yang dipilih untuk menempatkan kursor di sana tidak berfungsi; klik secara efektif dinonaktifkan. Namun, untuk situasi di mana memilih seluruh teks pada fokus diinginkan, mungkin lebih kecil dari dua kejahatan. "
JohnK

25

jQuery bukan JavaScript yang lebih mudah digunakan dalam beberapa kasus.

Lihat contoh ini:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Sumber: Trik CSS , MDN


7
Mungkin tidak apa-apa jika Anda tidak keberatan menggabungkan markup dan kode Anda; kebanyakan orang mencoba untuk menjaga naskah mereka 'tidak mengganggu' saat ini. Oh ... dan jQuery adalah Javascript.
Andrew Barber

2
Terima kasih atas saran onclick, bekerja dengan baik. Tidak semua orang menggunakan jQuery senang melihat opsi lain.
Lukus

ini mengasumsikan pengguna hanya menggunakan mouse
pcnate

dapat menggunakan onfocus = "this.focus (); this.select ()" untuk keyboard
Muhammad Nadeem

21

Ini bukan hanya masalah Chrome / Safari, saya mengalami perilaku yang sangat mirip dengan Firefox 18.0.1. Bagian yang lucu adalah bahwa ini tidak terjadi pada MSIE! Masalahnya di sini adalah peristiwa mouseup pertama yang memaksa untuk tidak memilih konten input, jadi abaikan saja kejadian pertama.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

Pendekatan timeOut menyebabkan perilaku aneh, dan memblokir setiap acara mouseup Anda tidak dapat menghapus pilihan mengklik lagi pada elemen input.


1
+1 untuk penggunaan satu untuk mencegah satu mouseup. Saya sangat tidak suka tidak dapat memilih teks dengan mouse setelah klik awal.
Pluc

13

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

Menggunakan JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

Menggunakan JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

Menggunakan Bereaksi JS:

Dalam masing-masing komponen di dalam fungsi render -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

2
Ini bekerja untuk saya dalam Bereaksi:onFocus={(e) => e.target.select()}
Paito

11

solusi saya adalah menggunakan batas waktu. Tampaknya bekerja ok

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Ini adalah solusi yang saya gunakan dan sukai. Saya menggunakan nilai batas waktu 0 karena itu akan menyebabkannya ditambahkan ke akhir antrian acara saat ini, yang berarti akan berjalan setelah peristiwa "mouseup".
DavidM


4

Saya tahu kode sebaris adalah gaya yang buruk, tetapi saya tidak ingin memasukkan ini ke file .js. Bekerja tanpa jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

3

Jawaban di sini membantu saya sampai pada titik tertentu, tetapi saya punya masalah pada bidang input Nomor HTML5 ketika mengklik tombol atas / bawah di Chrome.

Jika Anda mengklik salah satu tombol, dan meninggalkan mouse di atas tombol angka akan terus berubah seolah-olah Anda menahan tombol mouse karena mouseup sedang dibuang.

Saya memecahkan ini dengan menghapus handler mouseup segera setelah dipicu seperti di bawah ini:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Semoga ini bisa membantu orang di masa depan ...


Tidak. kamu memberikan solusi untuk masalah yang dihasilkan sendiri. Jika Anda melihat benar di jawabannya, mereka mengikat mouseupke teks field input saja dan tidak numbers. Masalah ini seharusnya tidak datang karena itu
Om Shankar

Masalah dengan mengikat mouseup adalah bahwa hal itu mengganggu ketika memindahkan kursor di dalam bidang. Ini adalah solusi yang lebih baik, tetapi jika Anda menabrak bidang, maka mousedown berikutnya akan hilang (dan pengguna tidak akan dapat memindahkan kursor dengan mouse). Itu lebih baik daripada kehilangan semua mousedown!
Colin Breame

3

Ini akan berhasil, Coba ini -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Bekerja di Safari / IE 9 dan Chrome, saya tidak mendapatkan kesempatan untuk menguji di Firefox.


3

Saya tahu sudah ada banyak jawaban di sini - tetapi yang ini belum ada sejauh ini; solusi yang juga berfungsi dengan konten yang dihasilkan ajax:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

2

Saya dapat sedikit meningkatkan jawaban Zach dengan memasukkan beberapa panggilan fungsi. Masalah dengan jawaban itu adalah bahwa ia sepenuhnya menonaktifkan onMouseUp, sehingga mencegah Anda mengklik di dalam kotak teks setelah memiliki fokus.

Ini kode saya:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Ini sedikit perbaikan dari jawaban Zach. Ini bekerja dengan sempurna di IE, tidak bekerja sama sekali di Chrome, dan bekerja dengan kesuksesan bergantian di FireFox (secara harfiah setiap waktu lainnya). Jika seseorang memiliki gagasan tentang bagaimana membuatnya bekerja dengan andal di FF atau Chrome, silakan bagikan.

Bagaimanapun, saya pikir saya akan membagikan apa yang saya bisa untuk membuat ini sedikit lebih baik.


Ada kesalahan dalam kode Anda - metode kedua harus disebut "TextBoxMouseUp". Lihatlah jawaban saya yang menggunakan pendekatan serupa.
Colin Breame

1
Perlu dicatat bahwa onMouseUp=""dan onMouseDown=""bukan standar w3 yang benar. Mereka seharusnya onmouseup=""dan onmousedown="". Seperti halnya atribut html lainnya, mereka harus ditulis dalam huruf kecil bukan dalam huruf unta.
DrewT

2

Seperti @Travis dan @Mari, saya ingin memilih otomatis ketika pengguna mengklik, yang berarti mencegah perilaku default suatu mouseupperistiwa, tetapi tidak mencegah pengguna mengklik sekitar. Solusi yang saya buat, yang bekerja di IE11, Chrome 45, Opera 32 dan Firefox 29 (ini adalah browser yang saya instal), didasarkan pada urutan peristiwa yang terlibat dalam klik mouse.

Ketika Anda mengklik pada input teks yang tidak memiliki fokus, Anda mendapatkan acara ini (antara lain):

  • mousedown: Sebagai tanggapan atas klik Anda. Penanganan standar meningkat focusjika perlu dan mengatur mulai seleksi.
  • focus: Sebagai bagian dari penanganan standar mousedown.
  • mouseup: Selesai klik Anda, yang penanganan default-nya akan menetapkan akhir pemilihan.

Ketika Anda mengklik pada input teks yang sudah memiliki fokus, focusacara dilewati. Karena @Travis dan @Mari sama-sama menyadari, penanganan standar dari mouseupkebutuhan hanya dapat dicegah jika focusterjadi. Namun, karena tidak ada focuskejadian "tidak terjadi", kita perlu menyimpulkan ini, yang dapat kita lakukan di dalam mousedownhandler.

Solusi @ Mari mengharuskan jQuery diimpor, yang ingin saya hindari. Solusi @ Travis melakukan ini dengan memeriksa document.activeElement. Saya tidak tahu mengapa tepatnya solusinya tidak berfungsi di seluruh browser, tetapi ada cara lain untuk melacak apakah input teks memiliki fokus: cukup ikuti focusdanblur acara.

Berikut adalah kode yang berfungsi untuk saya:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Saya harap ini bisa membantu seseorang. :-)


+1 Terima kasih, tetapi bagaimana ini bisa ditulis ulang sehingga Anda tidak mengubah kode kontrol 'txtCustomer' ke dalam skrip? Apakah ada cara untuk mewariskan objek 'ini'?
Fandango68

Salah satu caranya adalah dengan membuat fungsi utilitas untuk menerapkan perilaku ke elemen apa pun, diteruskan sebagai parameter. Dalam fungsi itu, referensi elemen akan dikodekan dengan keras - ke parameter. Anda kemudian dapat menyebutnya pada sejumlah elemen input, diidentifikasi dengan cara apa pun yang Anda miliki. :-)
Jonathan Gilbert

Maaf saya seorang noob. Bisakah Anda memperbarui jawaban Anda dengan sebuah contoh? Terima kasih
Fandango68

1
Bungkus saja kode yang saya tulis dalam deklarasi fungsi yang mengambil parameter yang disebut "txtCustomer". Saya sarankan mengubah nama "txtCustomer" menjadi sesuatu yang lain, tetapi jika Anda tidak yakin melakukan hal itu, secara teknis akan bekerja dengan variabel bernama "txtCustomer". Artinya: function MakeTextBoxAutoSelect (txtCustomer) { apa yang saya tulis di atas }
Jonathan Gilbert


1

Apa itu solusi JavaScript atau jQuery yang akan memilih semua konten kotak teks saat kotak teks menerima fokus ?

Anda hanya perlu menambahkan atribut berikut:

onfocus="this.select()"

Sebagai contoh:

<input type="text" value="sometext" onfocus="this.select()">

(Jujur saya tidak tahu mengapa Anda membutuhkan yang lain.)


1

Ini bekerja untuk saya (memposting karena tidak ada jawaban tetapi dalam komentar)

 $("#textBox").focus().select();

0
$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Sunting: Per permintaan DavidG, saya tidak bisa memberikan detail karena saya tidak yakin mengapa ini berhasil, tapi saya percaya itu ada hubungannya dengan acara fokus yang merambat naik atau turun atau apa pun yang dilakukannya dan elemen input yang mendapatkan pemberitahuan itu menerima fokus. Mengatur batas waktu memberi elemen waktu untuk menyadari bahwa itu dilakukan.


Tolong jelaskan jawaban Anda daripada hanya menempelkan beberapa kode.
DavidG

0

Jika Anda mengaitkan acara bersama-sama, saya percaya itu menghilangkan kebutuhan untuk menggunakan .one seperti yang disarankan di tempat lain di utas ini.

Contoh:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

0

Catatan: Jika Anda pemrograman dalam ASP.NET, Anda dapat menjalankan skrip menggunakan ScriptManager.RegisterStartupScript di C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Atau cukup ketik skrip di halaman HTML yang disarankan di jawaban lain.


Pertanyaannya tidak memiliki ASP.NET di mana pun. : |
Mohamed Thaufeeq

Benar, saya memposting ini kalau-kalau programmer menggunakan ASP.NET. Ini dapat bermanfaat bagi seseorang yang mencari jawaban menggunakan kerangka kerja (karena ini membantu saya). Saya hanya berbagi dan mudah-mudahan seseorang akan merasa terbantu.
Exel Gamboa

Kalau-kalau programmer menggunakan ASP.NET, ia akan menambahkan tag 'asp.net' ke pertanyaan. : |
Mohamed Thaufeeq

0

Saya menabur yang ini di suatu tempat, bekerja dengan sempurna!

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

0

Saya agak terlambat ke pesta, tetapi ini bekerja dengan sempurna di IE11, Chrome, Firefox, tanpa mengacaukan mouseup (dan tanpa JQuery).

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

ya tetapi jika Anda focusdengan masuk ke lapangan, Anda akan menemukan beberapa pendengar acara
mouseup

-1

Solusi saya berikutnya:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Jadi mouseup akan berfungsi biasanya, tetapi tidak akan membuat tidak dipilih setelah mendapatkan fokus dengan input

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.