Bagaimana untuk Mendapatkan Kedudukan Karet dalam Medan Input Teks?

Cara Mendapatkan Kembali Kedudukan Karet dalam Medan Input Teks

Mendapatkan kedudukan kursor dalam medan input teks adalah penting untuk pelbagai tugas, seperti pengesahan borang dan penyuntingan teks. Rangka kerja jQuery menyediakan penyelesaian mudah untuk masalah ini.

Kaedah jQuery:

Pemalam caretPosition() ialah cara yang mudah untuk mendapatkan semula kedudukan caret. Cuma panggil fungsi berikut pada medan input yang dikehendaki:

$("input#myInput").caretPosition();

Kaedah ini mengembalikan kedudukan karet sebagai nilai integer, mewakili indeks aksara dalam medan input.

Native Kaedah Pelayar:

Sebagai alternatif, anda boleh menggunakan kaedah penyemak imbas asli untuk mendapatkan semula kedudukan karet. Kaedah ini berbeza-beza bergantung pada penyemak imbas, tetapi berikut adalah yang paling biasa:

• Internet Explorer: Gunakan sifat selectionStart bagi medan input.
• Firefox: Gunakan sifat selectionStart dan selectionEnd bagi input medan.

Contoh:

Contoh berikut menunjukkan cara untuk mendapatkan semula kedudukan karet menggunakan JavaScript asli:

function getCaretPosition(inputField) {
  // Initialize caret position to 0
  var caretPos = 0;

  // IE support
  if (document.selection) {
    inputField.focus();
    
    // Get empty selection range to find cursor position
    var selectionRange = document.selection.createRange();
    selectionRange.moveStart('character', -inputField.value.length);
    
    // Caret position is the length of the selection
    caretPos = selectionRange.text.length;
  }

  // Firefox support
  else if (inputField.selectionStart || inputField.selectionStart == '0') {
    // Caret position is the selection start or end, depending on the direction
    caretPos = inputField.selectionDirection == 'backward' ? inputField.selectionStart : inputField.selectionEnd;
  }

  return caretPos;
}

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Kedudukan Karet dalam Medan Input Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!