Cursorposition in einem ContentEditable Beim Arbeiten mit Content Editable Lösungsübersicht Um dieses Problem zu lösen, speichern wir die aktuelle Cursorposition wenn das Div den Fokus verliert, und stellen Sie ihn wieder her, wenn es den Fokus wiedererlangt. Hier ist eine Implementierung, die in allen gängigen Browsern funktioniert: Diese Lösung deckt sowohl die Wiederherstellung der Cursorposition beim erneuten Fokussieren als auch das optionale Verhalten der Wiederherstellung der Auswahl beim Klicken ab. Es ist mit allen gängigen Browsern kompatibel und bietet eine definitive Lösung für das Problem des Verlusts der Cursorposition in einem bearbeitbaren Inhalt Das obige ist der detaillierte Inhalt vonWie behalte ich die Cursorposition in einem ContentEditable bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!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);
});
});