Memilih semua teks dalam input teks HTML saat diklik

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"

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" />

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

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>

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.

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

Mencoba:

onclick="this.select()"

Ini sangat bagus untuk saya.

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.

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.

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.

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.

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.

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.

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" />

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.

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

Pertanyaan ini memiliki opsi untuk saat .select () tidak berfungsi pada platform seluler: Secara terprogram memilih teks dalam bidang input pada perangkat iOS (Safari seluler)

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

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.

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

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.

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

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