Bagaimana Saya Mendapatkan Kedudukan Karet Berasaskan Watak dalam Textarea?

Mendapatkan Kedudukan Karet Berasaskan Watak dalam Textarea

Menentukan kedudukan caret dalam elemen textarea boleh menjadi satu cabaran, terutamanya apabila mencari yang tepat indeks lajur dalam aksara. Berikut ialah pecahan cara anda boleh mencapai perkara ini:

Untuk Firefox dan Safari

Pelayar berasaskan tokek seperti Firefox dan Safari dengan lancar menyediakan sifat selectionStart pada textarea. Sifat ini mewakili kedudukan karet dalam aksara dari permulaan elemen.

Untuk Internet Explorer

Malangnya, Internet Explorer tidak menawarkan akses terus kepada karet kedudukan. Sebaliknya, anda perlu menggunakan pendekatan yang lebih rumit:

• Buat Julat Pilihan: Gunakan createRange() untuk menjana objek julat pilihan.
• Pilihan Pendua: Buat pendua julat pilihan untuk perbandingan tujuan.
• Alihkan Sempadan Pilihan: Ubah suai pilihan pendua untuk memasukkan aksara baris baharu pada permulaan teks elemen.
• Bandingkan Panjang Pemilihan: Kurangkan panjang pilihan pendua daripada panjang pilihan asal untuk menentukan kedudukan caret.

Contoh Kod Lengkap

Kod JavaScript berikut menunjukkan cara untuk mendapatkan semula kedudukan caret dalam aksara:

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  }
  return 0;
}

Contoh Penggunaan

Anda boleh menggunakan fungsi ini seperti jadi:

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);

Mendapatkan Kembali Rentetan Sekitar

Untuk mendapatkan rentetan yang mengelilingi kursor atau pemilihan, anda boleh memanfaatkan fungsi subrentetan() untuk mengekstrak teks sebelum ini, semasa, dan selepas pemilihan.

Atas ialah kandungan terperinci Bagaimana Saya Mendapatkan Kedudukan Karet Berasaskan Watak dalam Textarea?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!