Nacházím spoustu dobrých odpovědí na křížový prohlížeč, jak NASTAVIT pozici indexu kurzoru nebo stříšky v contentEditable
prvek, ale žádný o tom, jak ZÍSKAT nebo najít jeho index…
Co chci udělat, je znát index stříšky v tomto div, na keyup
.
Když tedy uživatel píše text, mohu kdykoli znát index jeho kurzoru v contentEditable
prvek.
EDIT:Hledám INDEX v obsahu div (textu), nikoli v souřadnicích kurzoru.
<div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? });
Odpověď
Následující kód předpokládá:
- V rámci upravitelného
<div>
je vždy jeden textový uzel a žádné další uzly - Upravitelný div nemá CSS
white-space
vlastnost nastavena napre
Pokud potřebujete obecnější přístup, který bude pracovat s obsahem s vnořenými prvky, zkuste tuto odpověď:
https://stackoverflow.com/a/4812022/96100
Kód:
function getCaretPosition(editableDiv) { var caretPos = 0, sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); if (range.commonAncestorContainer.parentNode == editableDiv) { caretPos = range.endOffset; } } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); if (range.parentElement() == editableDiv) { var tempEl = document.createElement("span"); editableDiv.insertBefore(tempEl, editableDiv.firstChild); var tempRange = range.duplicate(); tempRange.moveToElementText(tempEl); tempRange.setEndPoint("EndToEnd", range); caretPos = tempRange.text.length; } } return caretPos; }
#caretposition { font-weight: bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div> <div id="caretposition">0</div> <script> var update = function() { $('#caretposition').html(getCaretPosition(this)); }; $('#contentbox').on("mousedown mouseup keydown keyup", update); </script>