I am faced with following: when I try to select text in a contenteditable
element and the end of the selection is the start of the element content, then no select event is fired and there are no Selection
and Range
objects.
Could somebody please give me any advice on why this might occur or how I can prevent this?
Code responsible for getting selection range:
$('div[contenteditable="true"]').bind("mouseup keyup touchend", function() {
lastCaretIndex = getSelectionRange();
});
function getSelectionRange() {
var sel;
if (window.getSelection) {
sel = window.getSelection();
console.log(sel); // this doesn't print anything event empty string
if (sel.rangeCount) {
return sel.getRangeAt(0);
}
} else if (document.selection) {
return document.createRange();
}
return null;
}
<div id="main-input" contenteditable="true">Hello world!</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
JSFiddle (open your browser console to make sure that selection doesn't get logged).
unction()
above in your code sample want work and I just don't want to dig trough typos ...