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

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

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

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

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

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

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.

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

solusi saya adalah menggunakan batas waktu. Tampaknya bekerja ok

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

Ini juga akan berfungsi di iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

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>

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

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.

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

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.

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

onclick="this.focus();this.select()"

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

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

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

$('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.

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

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.

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

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

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