Bagaimana untuk meletakkan kursor pada akhir teks dalam medan input teks menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk meletakkan kursor pada akhir teks dalam medan input teks menggunakan JavaScript?

王林

Lepaskan： 2023-08-27 14:09:17

ke hadapan

1262 orang telah melayarinya

如何使用 JavaScript 将光标位置放置在文本输入字段中的文本末尾？

Dalam HTML, medan input digunakan untuk mendapatkan input daripada pengguna. Kadangkala, kita perlu mendapatkan rentetan atau mesej teks panjang dalam input. Dalam senario ini, pengguna mungkin perlu pergi ke penghujung medan input untuk menambah lebih banyak kandungan atau mesej. Oleh itu, kita harus menetapkan sesuatu supaya pengguna boleh mengklik pada butang dan boleh pergi ke penghujung medan input. Dalam tutorial ini, kita akan belajar menggunakan JavaScript untuk meletakkan kursor pada penghujung teks dalam medan input.

Gunakan kaedah setSelectionRange()

Kaedah

setSelectionRange() digunakan untuk memilih teks dalam medan input. Dua parameter diperlukan untuk memulakan dan menamatkan pemilihan. Kita boleh memilih aksara terakhir menggunakan kaedah setSelectionRange(), meletakkan kursor pada penghujung teks.

Tatabahasa

Pengguna boleh menggunakan kaedah setSelectionRange() mengikut sintaks berikut untuk meletakkan kursor pada penghujung teks.

input.setSelectionRange(len, len);

Salin selepas log masuk

Dalam sintaks di atas, input ialah elemen HTML yang kami akses dalam JavaScript. "len" ialah panjang nilai input.

Contoh

Dalam contoh di bawah, kami telah mencipta medan input dan butang. Apabila pengguna mengklik butang, ia melaksanakan fungsi moveAtend().

Dalam JavaScript, kami mentakrifkan fungsi moveAtend(), yang mengakses medan input "Nama". Selepas itu, ia menetapkan fokus pada medan input menggunakan kaedah fokus(). Selepas itu, kami menggunakan kaedah setSelectionRange() dengan menghantar panjang nilai input sebagai dua parameter. Dalam output, pengguna boleh mengklik butang dan menontonnya menetapkan kedudukan kursor ke penghujung teks.

<html>
   <body>
      <h3> Using the <i> setSelectionRange() method </i> to move the cursor at the end of the input field in JavaScript </h3>
      <input type = "text" id = "name" value = "Shubham">
      <button onclick = "moveAtend()"> Move cursor at end </button>
      <script>
         let output = document.getElementById("output");
         function moveAtend() {
         let name = document.getElementById("name");
         name.focus();
         name.setSelectionRange(name.value.length, name.value.length);
         }
      </script>
</html>

Salin selepas log masuk

Gunakan sifat pilihanMula dan tamat pilihan

Sifat CSS “selectionStart” dan “selectionEnd” digunakan untuk memilih nilai input dalam medan input. "selectionStart" mengambil nilai indeks dari tempat kami memulakan pemilihan, dan "selectionEnd" mengambil nilai indeks di mana kami perlu menamatkan pemilihan teks.

Di sini kita boleh menetapkan nilai sifat "selectionStart" dan "selectionEnd" sama dengan panjang teks untuk meletakkan kursor pada penghujung teks.

Tatabahasa

Pengguna boleh menggunakan sifat "selectionStart" dan "selectionEnd" untuk meletakkan kursor pada penghujung teks dengan mengikut sintaks berikut.

input.selectionStart = len;
input.selectionEnd = len;

Salin selepas log masuk

Dalam sintaks di atas, input ialah elemen HTML dan 'len' ialah panjang nilainya.

Contoh

Seperti contoh pertama, kami mencipta medan input dalam contoh di bawah. Dalam fungsi moveAtend(), kami menetapkan nilai sifat "selectionStart" dan "selectionEnd" sama dengan panjang teks medan input "nama".

<html>
   <body>
      <h3> Using the <i> selectionStart and selectionEnd Properties </i> to move the cursor at the end of the input field in JavaScript </h3>
      <input type = "text" id = "name" value = "Shubham">
      <button onclick = "moveAtend()"> Move cursor at end </button>
      <script>
         let output = document.getElementById("output");
         function moveAtend() {
         let name = document.getElementById("name");
         name.focus();
         name.selectionStart = name.value.length;
         name.selectionEnd = name.value.length;
         }
      </script>
</html>

Salin selepas log masuk

Kesimpulan

Kami mempelajari dua cara untuk meletakkan kursor pada penghujung nilai teks dalam medan input. Dalam kaedah pertama, kami menggunakan kaedah setSelectionRange() dalam kaedah kedua, kami menggunakan sifat "selectionStart" dan "selectionEnd". Walau bagaimanapun, kedua-dua kaedah adalah hampir sama, kaedah setSelectionRange() mengambil nilai akhir "selectionStart" dan "selection" sebagai parameter.

Atas ialah kandungan terperinci Bagaimana untuk meletakkan kursor pada akhir teks dalam medan input teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!