Get text cursor position of content editable element

Question

Here is some code that will get the text cursor position by clicking a button:

 <html> <head> <script> function f1(el) { var val = el.value; alert(val.slice(0, el.selectionStart).length); } </script> </head> <body> <input type=text id=t1 value=abcd> <button onclick="f1(document.getElementById('t1'))">check position</button> </body> </html>

I want to create something very similar to this but in a content editable element instead

<span contenteditable="true">abcd</span>

I have spent some time researching this, but I can't seem to find any working code for all browsers. Any ideas?

Answer 1

 <html> <head> <script> function f1(el) { alert(getCaretPosition(el)); } 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; } </script> </head> <body> <span id="test" contenteditable="true">abcd</span> <button onclick="f1(document.getElementById('test'))">check position</button> </body> </html>

Get text cursor position of content editable element

Question

1 answers

solution1
0 2018-07-11 07:05:54

Get text cursor position of content editable element

Question

1 answers

solution1 0 2018-07-11 07:05:54

solution1
0 2018-07-11 07:05:54