Memilih semua teks dalam input teks HTML saat diklik


555

Saya memiliki kode berikut untuk menampilkan kotak teks di halaman web HTML.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Saat halaman ditampilkan, teks berisi pesan Silakan masukkan pesan ID pengguna . Namun, saya menemukan bahwa pengguna perlu mengklik 3 kali untuk memilih semua teks (dalam hal ini Silakan masukkan ID pengguna ).

Apakah mungkin untuk memilih seluruh teks hanya dengan satu klik?

Edit:

Maaf, saya lupa mengatakan: Saya harus menggunakan input type="text"


6
Pendekatan yang lebih baik adalah dengan menggunakan <label>untuk label dan bukan value. Anda dapat menggunakan JS dan CSS untuk membuatnya terlihat sama, namun tidak terlalu anti-semantik. dorward.me.uk/tmp/label-work/example.html memiliki contoh menggunakan jQuery.
Quentin

12
Atau bahkan menggunakan pengganti jika Anda bekerja di proyek HTML5 modern.
Léo Lam

1
placeholder = "Silakan masukkan ID pengguna"
Marcelo Bonus

Jawaban:


910

Anda dapat menggunakan potongan javascript ini:

<input onClick="this.select();" value="Sample Text" />

Namun ternyata itu tidak berfungsi di Safari seluler. Dalam hal ini Anda dapat menggunakan:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

9
Untuk membuatnya lebih umum, Anda bisa menggunakan this.idargumen untuk penangan klik. Lebih baik lagi, Anda bisa menghilangkan getElementByIdseluruhnya dan lulus thissebagai argumen.
Asad Saeeduddin

12
Di Safari seluler itu tidak berfungsi. Coba panggil this.setSelectionRange (0, 9999) sebagai gantinya.
Dean Radcliffe

43
@DeanRadcliffe Bagus sekali! Saya akan menggunakan this.setSelectionRange(0, this.value.length)sebagai gantinya.
2grit


8
Adakah pembaruan pada dukungan browser? w3schools.com/jsref/met_text_select.asp mengklaim itu didukung oleh semua browser
Ayyash

65

Solusi yang diposting sebelumnya memiliki dua keanehan:

  1. Di Chrome pilihan melalui .select () tidak tetap - menambahkan sedikit batas waktu menyelesaikan masalah ini.
  2. Tidak mungkin menempatkan kursor pada titik yang diinginkan setelah fokus.

Berikut adalah solusi lengkap yang memilih semua teks pada fokus, tetapi memungkinkan memilih titik kursor tertentu setelah fokus.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

7
Untuk menangani kasus di mana pengguna mengklik jauh dari bidang lalu kembali lagi, tambahkan.on('blur', 'input', function(){focusedElement = null;})
Tamlyn

1
batas waktu 0bekerja untuk saya di chrome dan firefox. tidak yakin dari mana batas waktu Anda 50berasal.
thejoshwolfe

1
Solusinya adalah menggunakan onClick, bukan onFocus. Bekerja dengan sempurna dan tidak perlu kode yang rumit.
Ismael

4
@CoryHouse tidak masalah, karena Fokus via tab secara asli memilih teks! Tidak diperlukan javascript.
Ismael

1
@CoryHouse bahkan setelah 4 tahun kode Anda bekerja seperti pesona. Man, Ambil busur. Terima kasih untuk hack kecil yang kotor ini. Saya mencari selama 2-3 hari sampai saya menemukan ini. : +1:
Rutvij Kothari

47

Html (Anda harus meletakkan atribut onclick pada setiap input yang Anda inginkan berfungsi pada halaman)

 <input type="text" value="click the input to select" onclick="this.select();"/>

ATAU OPSI YANG LEBIH BAIK

jQuery (ini akan bekerja untuk setiap input teks pada halaman, tidak perlu mengubah html Anda):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

22
Mungkin akan lebih baik untuk mengikat ke acara fokus daripada mengklik untuk mereka yang tab melalui elemen formulir.
Andrew Ensley

7
@Andrew Itu tidak perlu karena teks selalu dipilih jika Anda tab melalui elemen input. ;-)
nietonfir

acara fokus sangat memprihatinkan, acara buram di sisi lain berguna untuk memicu validasi dan penyimpanan formulir secara otomatis, berfungsi saat Anda membuka tab juga!
oLinkWebDevelopment

Seharusnya berfungsi dengan baik, pastikan Anda menggunakan versi jQuery yang diperbarui, atau gunakan $ (dokumen) .live () pada versi yang lebih lama.
oLinkWebDevelopment

2
Kecuali jika pengguna sudah memiliki jQuery opsi yang lebih baik tidak melibatkan penambahan ketergantungan pada pustaka pihak ketiga.
Ross

37

Saya tahu ini sudah lama, tetapi opsi terbaik adalah sekarang menggunakan placeholderatribut HTML baru jika memungkinkan:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Ini akan menyebabkan teks ditampilkan kecuali nilai dimasukkan, sehingga tidak perlu memilih teks atau menghapus input.


2
Harap perhatikan bahwa placeholder hanya diizinkan dengan doctype html.
dogawaf

12

Jawaban yang tercantum sebagian menurut saya. Saya telah menghubungkan di bawah dua contoh bagaimana melakukan ini di Angular dan dengan JQuery.

Solusi ini memiliki beberapa fitur berikut:

  • Bekerja untuk semua browser yang mendukung JQuery, Safari, Chrome, IE, Firefox, dll.
  • Bekerja untuk Phonegap / Cordova: Android dan IO.
  • Hanya pilih semua satu kali setelah input mendapatkan fokus hingga kabur berikutnya dan kemudian fokus
  • Beragam input dapat digunakan dan tidak hilang.
  • Angular directive memiliki penggunaan ulang yang bagus, cukup tambahkan directive select-all-on-click
  • JQuery dapat dimodifikasi dengan mudah

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

solusi angularjs bagus. Terima kasih. walaupun saya tidak menggunakan flag hasSelectedAll. Saya kira ini ketentuan untuk klik kedua yang mungkin berarti pengguna ingin menempatkan kursor.
dewd

11

Mencoba:

onclick="this.select()"

Ini sangat bagus untuk saya.


11

Anda selalu dapat menggunakan document.execCommand( didukung di semua browser utama )

document.execCommand("selectall",null,false);

Memilih semua teks dalam elemen yang saat ini difokuskan.


Ini terlihat menjadi solusi yang elegan. Kode lengkap akan terlihat seperti:<input type="text" onclick="document.execCommand('selectall',null,false);" />
pipepiper

Ya, ini cara favorit saya untuk melakukan tugas semacam ini, esp. karena berfungsi untuk contenteditableelemen juga. Saya pikir Anda juga dapat membuatnya sedikit lebih elegan, yaitu <input type="text" onfocus="document.execCommand('selectall')">- cukup yakin Anda dapat menghapus nulldan falsejika Anda tidak menggunakannya.
Toastrackenigma

Ya. onfocustampaknya lebih baik daripada onclick. dan ya, orang bisa menyingkirkan nulldan false. Terima kasih!
pipepiper

Saya setuju bahwa ini adalah solusi cross-browser terbaik dengan peringatan bahwa batas waktu yang disebutkan dalam solusi @Corey House harus digunakan untuk membuat cross browser ini kompatibel.
Eric Lease

1
saat menggunakan onfocus, seluruh halaman dipilih saat input diklik di Chrome. onclickbekerja dengan baik.
robotik

8

masukan fokus otomatis, dengan acara onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Ini memungkinkan Anda membuka formulir dengan elemen yang diinginkan dipilih. Ia bekerja dengan menggunakan fokus otomatis untuk menekan input, yang kemudian mengirimkan dirinya sendiri peristiwa onfokus, yang pada gilirannya memilih teks.


8

Catatan: Ketika Anda mempertimbangkan onclick="this.select()", Pada klik pertama, Semua karakter akan dipilih, Setelah itu mungkin Anda ingin mengedit sesuatu di input dan mengklik di antara karakter lagi tetapi akan memilih semua karakter lagi. Untuk memperbaiki masalah ini Anda harus menggunakan onfocusbukan onclick.


6

Memang, gunakan onclick="this.select();"tetapi ingatlah untuk tidak menggabungkannya disabled="disabled"- itu tidak akan berfungsi saat itu dan Anda harus memilih secara manual atau multi-klik untuk memilih. Jika Anda ingin mengunci nilai konten yang akan dipilih, gabungkan dengan atributnya readonly.


4

Berikut versi jawaban Shoban yang dapat digunakan kembali:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

Dengan begitu Anda dapat menggunakan kembali skrip yang jelas untuk banyak elemen.


4

Anda bisa mengganti

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Dengan:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Placeholder digunakan untuk mengganti nilai seperti yang Anda inginkan agar orang bisa Ketik dalam kotak teks tanpa harus mengklik beberapa kali atau menggunakan ctrl + a. Placeholder membuatnya jadi bukan nilai tetapi seperti namanya tempat tempat. Itulah yang digunakan dalam beberapa formulir online yang bertuliskan "Nama pengguna di sini" atau "Email" dan ketika Anda mengkliknya, "Email" menghilang dan Anda dapat mulai mengetik segera.


3

Solusi tepat untuk apa yang Anda tanyakan adalah:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Tapi saya kira, Anda mencoba menampilkan "Silakan masukkan ID pengguna" sebagai pengganti atau isyarat dalam input. Jadi, Anda dapat menggunakan yang berikut ini sebagai solusi yang lebih efisien:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

3

Berikut ini contoh dalam Bereaksi, tetapi dapat diterjemahkan ke jQuery di vanilla JS jika Anda lebih suka:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

Trik di sini adalah untuk menggunakan onMouseDownkarena elemen sudah menerima fokus pada saat "klik" acara menyala (dan dengan demikianactiveElement pemeriksaan akan gagal).

Itu activeElement cek sangat diperlukan bahwa mereka pengguna dapat posisi kursor mereka di mana mereka inginkan tanpa terus-menerus kembali memilih seluruh masukan.

Batas waktu diperlukan karena jika tidak teks akan dipilih dan kemudian langsung tidak dipilih, karena saya kira browser melakukan kata kunci pemeriksaan posisi-kursor.

Dan terakhir, yang el = ev.currentTargetdiperlukan dalam Bereaksi karena Bereaksi ulang menggunakan objek acara dan Anda akan kehilangan acara sintetis pada saat setTimeout menyala.


Apakah Bereaksi jQuery baru?
vpzomtrrfrt

@vpzomtrrfrt Sure is: DJ / K. Saya telah menulis ini di Bereaksi dan saya tidak akan membatalkan Bereaksi hanya untuk beberapa poin SO. Ambil atau tinggalkan :-)
mpen

Bagaimana ini contoh dalam Bereaksi?! Ini lebih merupakan contoh dalam javascript asli.
Cesar

2

Masalah dengan menangkap peristiwa klik adalah bahwa setiap klik berikutnya dalam teks akan memilihnya lagi, sedangkan pengguna mungkin mengharapkan untuk memposisikan ulang kursor.

Yang berhasil bagi saya adalah mendeklarasikan variabel, pilihSearchTextOnClick, dan atur menjadi true secara default. Penangan klik memeriksa bahwa variabel itu masih benar: jika ya, ia menetapkannya menjadi false dan melakukan pemilihan (). Saya kemudian memiliki event handler blur yang mengembalikannya ke true.

Sejauh ini hasilnya tampak seperti perilaku yang saya harapkan.

(Sunting: Saya lalai mengatakan bahwa saya telah mencoba menangkap acara fokus seperti yang disarankan seseorang, tetapi itu tidak berhasil: setelah acara fokus menyala, acara klik dapat diaktifkan, segera membatalkan pilihan teks).



2

Html seperti ini <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

dan kode javascript tanpa ikatan

function textSelector(ele){
    $(ele).select();
}

4
"javascript:" hanya digunakan dalam href, dan harus dihindari.
user1133275

1

Nah ini adalah aktivitas normal untuk TextBox.

Klik 1 - Tetapkan fokus

Klik 2/3 (klik dua kali) - Pilih teks

Anda dapat mengatur fokus pada TextBox ketika halaman pertama kali dimuat untuk mengurangi "pilih" menjadi peristiwa klik ganda tunggal.


1
Juga 2 klik untuk pemilihan kata dan 3 untuk pemilihan baris.
Arthur

1

Gunakan "placeholder" alih-alih "nilai" di bidang input Anda.


0

Jika Anda menggunakan AngularJS, Anda dapat menggunakan arahan khusus untuk akses mudah:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Sekarang kita bisa menggunakannya seperti ini:

<input type="text" select-on-click ... />

Sampel ini dengan requirejs - sehingga baris pertama dan terakhir dapat dilewati jika menggunakan sesuatu yang lain.


0

Jika ada yang ingin melakukan ini pada pemuatan halaman w / jQuery (manis untuk bidang pencarian) di sini adalah solusi saya

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Berdasarkan pos ini . Terima kasih untuk CSS-Tricks.com


0

Jika Anda hanya mencoba untuk memiliki teks placeholder yang akan diganti ketika pengguna memilih elemen maka itu jelas praktik terbaik untuk menggunakan placeholderatribut saat ini. Namun, jika Anda ingin memilih semua nilai saat ini saat bidang mendapatkan fokus, maka kombinasi jawaban @Cory House dan @Toastrackenigma tampaknya paling kanonik. Gunakan focusdanfocusout acara, dengan penangan yang mengatur / melepaskan elemen fokus saat ini, dan pilih semua saat fokus. Contoh angular2 / typescript adalah sebagai berikut (tetapi sepele untuk dikonversi ke vanilla js):

Templat:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Komponen:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};
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.