Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mengalihkan Kursor ke Penghujung Elemen Boleh Diedit Kandungan?

Bagaimana untuk Mengalihkan Kursor ke Penghujung Elemen Boleh Diedit Kandungan?

Patricia Arquette
Patricia Arquetteasal
2024-11-11 01:50:02911semak imbas

How to Move the Cursor to the End of a ContentEditable Element?

Alihkan Kursor ke Penghujung Entiti Boleh Diedit Kandungan

Pernah menghadapi keperluan untuk meletakkan kursor ke penghujung elemen boleh diedit kandungan, sama seperti kefungsian yang dilihat dalam widget nota Gmail?

Penyelesaian

Untuk elemen yang boleh diedit kandungan, penyelesaian Geowa4 tidak boleh digunakan. Pendekatan yang disesuaikan diperlukan:

function setEndOfContenteditable(contentEditableElement) {
  var range, selection;
  if (document.createRange) {
    // Modern browsers
    range = document.createRange();
    range.selectNodeContents(contentEditableElement);
    range.collapse(false);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  } else if (document.selection) {
    // IE 8 and below
    range = document.body.createTextRange();
    range.moveToElementText(contentEditableElement);
    range.collapse(false);
    range.select();
  }
}

Untuk menggunakannya, ikuti contoh kod:

var elem = document.getElementById("txt1");
setEndOfContenteditable(elem);

Keserasian

Penyelesaian ini ialah serasi dengan semua penyemak imbas utama yang menyokong contenteditable.

Atas ialah kandungan terperinci Bagaimana untuk Mengalihkan Kursor ke Penghujung Elemen Boleh Diedit Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn