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"
javascript
html
textinput
Pertanyaan
sumber
sumber
<label>
untuk label dan bukanvalue
. 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.Jawaban:
Anda dapat menggunakan potongan javascript ini:
Namun ternyata itu tidak berfungsi di Safari seluler. Dalam hal ini Anda dapat menggunakan:
sumber
this.id
argumen untuk penangan klik. Lebih baik lagi, Anda bisa menghilangkangetElementById
seluruhnya dan lulusthis
sebagai argumen.this.setSelectionRange(0, this.value.length)
sebagai gantinya.Solusi yang diposting sebelumnya memiliki dua keanehan:
Berikut adalah solusi lengkap yang memilih semua teks pada fokus, tetapi memungkinkan memilih titik kursor tertentu setelah fokus.
sumber
.on('blur', 'input', function(){focusedElement = null;})
0
bekerja untuk saya di chrome dan firefox. tidak yakin dari mana batas waktu Anda50
berasal.Html (Anda harus meletakkan atribut onclick pada setiap input yang Anda inginkan berfungsi pada halaman)
ATAU OPSI YANG LEBIH BAIK
jQuery (ini akan bekerja untuk setiap input teks pada halaman, tidak perlu mengubah html Anda):
sumber
Saya tahu ini sudah lama, tetapi opsi terbaik adalah sekarang menggunakan
placeholder
atribut HTML baru jika memungkinkan:Ini akan menyebabkan teks ditampilkan kecuali nilai dimasukkan, sehingga tidak perlu memilih teks atau menghapus input.
sumber
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:
JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview
Angular: http://plnkr.co/edit/llcyAf?p=preview
sumber
Mencoba:
Ini sangat bagus untuk saya.
sumber
Anda selalu dapat menggunakan
document.execCommand
( didukung di semua browser utama )Memilih semua teks dalam elemen yang saat ini difokuskan.
sumber
<input type="text" onclick="document.execCommand('selectall',null,false);" />
contenteditable
elemen juga. Saya pikir Anda juga dapat membuatnya sedikit lebih elegan, yaitu<input type="text" onfocus="document.execCommand('selectall')">
- cukup yakin Anda dapat menghapusnull
danfalse
jika Anda tidak menggunakannya.onfocus
tampaknya lebih baik daripadaonclick
. dan ya, orang bisa menyingkirkannull
danfalse
. Terima kasih!onfocus
, seluruh halaman dipilih saat input diklik di Chrome.onclick
bekerja dengan baik.masukan fokus otomatis, dengan acara onfocus:
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.
sumber
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 menggunakanonfocus
bukanonclick
.sumber
Memang, gunakan
onclick="this.select();"
tetapi ingatlah untuk tidak menggabungkannyadisabled="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 atributnyareadonly
.sumber
Berikut versi jawaban Shoban yang dapat digunakan kembali:
Dengan begitu Anda dapat menggunakan kembali skrip yang jelas untuk banyak elemen.
sumber
Anda bisa mengganti
Dengan:
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.
sumber
Solusi tepat untuk apa yang Anda tanyakan adalah:
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:
sumber
Berikut ini contoh dalam Bereaksi, tetapi dapat diterjemahkan ke jQuery di vanilla JS jika Anda lebih suka:
Trik di sini adalah untuk menggunakan
onMouseDown
karena 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.currentTarget
diperlukan dalam Bereaksi karena Bereaksi ulang menggunakan objek acara dan Anda akan kehilangan acara sintetis pada saat setTimeout menyala.sumber
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).
sumber
Pertanyaan ini memiliki opsi untuk saat .select () tidak berfungsi pada platform seluler: Secara terprogram memilih teks dalam bidang input pada perangkat iOS (Safari seluler)
sumber
Html seperti ini
<input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
dan kode javascript tanpa ikatan
sumber
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.
sumber
Gunakan "placeholder" alih-alih "nilai" di bidang input Anda.
sumber
Jika Anda menggunakan AngularJS, Anda dapat menggunakan arahan khusus untuk akses mudah:
Sekarang kita bisa menggunakannya seperti ini:
Sampel ini dengan requirejs - sehingga baris pertama dan terakhir dapat dilewati jika menggunakan sesuatu yang lain.
sumber
Jika ada yang ingin melakukan ini pada pemuatan halaman w / jQuery (manis untuk bidang pencarian) di sini adalah solusi saya
Berdasarkan pos ini . Terima kasih untuk CSS-Tricks.com
sumber
Jika Anda hanya mencoba untuk memiliki teks placeholder yang akan diganti ketika pengguna memilih elemen maka itu jelas praktik terbaik untuk menggunakan
placeholder
atribut 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. Gunakanfocus
danfocusout
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:
Komponen:
sumber