Bagaimana cara mendapatkan posisi kolom caret (bukan piksel) di textarea, dalam karakter, dari awal?

Bagaimana Anda mendapatkan posisi tanda kuret dalam <textarea>menggunakan JavaScript?

Sebagai contoh: This is| a text

Ini harus kembali 7.

Bagaimana Anda mendapatkannya untuk mengembalikan string yang mengelilingi kursor / seleksi?

Misalnya: 'This is', '', ' a text'.

Jika kata "is" disorot, maka itu akan kembali 'This ', 'is', ' a text'.

Dengan Firefox, Safari (dan peramban berbasis Gecko lainnya) Anda dapat dengan mudah menggunakan textarea.selectionStart, tetapi untuk IE yang tidak berfungsi, jadi Anda harus melakukan sesuatu seperti ini:

function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "\001",
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

( kode lengkap di sini )

Saya juga menyarankan Anda untuk memeriksa Plugin jQuery FieldSelection , ini memungkinkan Anda untuk melakukan itu dan banyak lagi ...

Sunting: Saya benar-benar menerapkan kembali kode di atas:

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

Lihat contoh di sini .

Diperbarui 5 September 2010

Melihat semua orang sepertinya diarahkan ke sini untuk masalah ini, saya menambahkan jawaban saya ke pertanyaan serupa, yang berisi kode yang sama dengan jawaban ini tetapi dengan latar belakang penuh bagi mereka yang tertarik:

Document.selection.createRange IE tidak termasuk memimpin atau mengikuti baris kosong

Untuk menghitung trailing line break sangat rumit di IE, dan saya belum melihat solusi yang melakukan ini dengan benar, termasuk jawaban lain untuk pertanyaan ini. Namun dimungkinkan, menggunakan fungsi berikut, yang akan mengembalikan Anda awal dan akhir seleksi (yang sama dalam kasus tanda sisipan) dalam suatu <textarea>atau teks <input>.

Perhatikan bahwa textarea harus memiliki fokus agar fungsi ini berfungsi dengan baik di IE. Jika ragu, hubungi metode textarea focus()terlebih dahulu.

function getInputSelection(el) {
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

Saya memodifikasi fungsi di atas menjadi akun carriage return di IE. Ini belum diuji tetapi saya melakukan sesuatu yang mirip dengan itu dalam kode saya sehingga harus bisa dikerjakan.

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

    var add_newlines = 0;
    for (var i=0; i<rc.text.length; i++) {
      if (rc.text.substr(i, 2) == '\r\n') {
        add_newlines += 2;
        i++;
      }
    }

    //return rc.text.length + add_newlines;

    //We need to substract the no. of lines
    return rc.text.length - add_newlines; 
  }  
  return 0; 
}

Jika Anda tidak harus mendukung IE, Anda dapat menggunakan selectionStartdan selectionEndatribut textarea.

Untuk mendapatkan posisi caret gunakan saja selectionStart:

function getCaretPosition(textarea) {
  return textarea.selectionStart
}

Untuk mendapatkan string seputar seleksi, gunakan kode berikut:

function getSurroundingSelection(textarea) {
  return [textarea.value.substring(0, textarea.selectionStart)
         ,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
         ,textarea.value.substring(textarea.selectionEnd, textarea.value.length)]
}

Demo di JSFiddle .

Lihat juga dokumen HTMLTextAreaElement .