Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit ``?

Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit ``?

Barbara Streisandasal: 2024-11-12 08:59:02211semak imbas

How to Maintain Cursor Position in a ContentEditable ``?

Kekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit

Apabila bekerja dengan kandungan boleh diedit

elemen, selalunya wajar untuk mengekalkan kedudukan kursor selepas elemen itu kembali fokus. Secara lalai, penyemak imbas biasanya menetapkan semula kursor ke permulaan teks apabila memfokus semula.

Gambaran Keseluruhan Penyelesaian

Untuk menyelesaikan isu ini, kami menyimpan kedudukan kursor semasa apabila div kehilangan fokus dan memulihkannya apabila ia mendapat semula fokus. Berikut ialah pelaksanaan yang berfungsi merentasi penyemak imbas utama:

var savedRange; // Variable to store the saved selection
var isInFocus; // Flag to track focus state

function saveSelection() {
  if (window.getSelection) {
    // Browser-specific logic to save the selected range
    savedRange = window.getSelection().getRangeAt(0);
  }
}

function restoreSelection() {
  isInFocus = true;
  document.getElementById("area").focus();

  if (savedRange != null) {
    // Browser-specific logic to restore the saved range
    if (window.getSelection) {
      var s = window.getSelection();
      s.removeAllRanges();
      s.addRange(savedRange);
    }
  }
}

// Optional code for selection restoration on click
function cancelEvent(e) {
  if (isInFocus == false && savedRange != null) {
    e.stopPropagation();
    e.preventDefault();
    restoreSelection();
  }
}

// Event handlers for saving and restoring selection
$(document).ready(function() {
  $("#area").focus(function() {
    isInFocus = true;
  });

  $("#area").blur(function() {
    isInFocus = false;
    saveSelection();
  });

  $("#area").mouseup(function() {
    saveSelection();
  });

  $("#area").keyup(function() {
    saveSelection();
  });

  $("#area").focusin(function() {
    restoreSelection();
  });

  // Optional event handlers for restoring selection on click
  $("#area").mousedown(function(e) {
    return cancelEvent(e);
  });

  $("#area").click(function(e) {
    return cancelEvent(e);
  });
});

Penyelesaian ini meliputi kedua-dua pemulihan kedudukan kursor semasa memfokus semula dan tingkah laku pilihan untuk memulihkan pemilihan pada klik. Ia serasi dengan semua penyemak imbas utama dan menyediakan penyelesaian muktamad kepada masalah kehilangan kedudukan kursor dalam kandungan yang boleh diedit

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Kedudukan Kursor dalam Kandungan Boleh Diedit ``?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

default this position issue

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

Artikel sebelumnya：Bagaimana untuk MENYIASKAN Data x-www-form-urlencoded dengan Ambil?Artikel seterusnya：Bagaimana untuk MENYIASKAN Data x-www-form-urlencoded dengan Ambil?

Artikel berkaitan

Lihat lagi