Check if cursor is at the begining of content editable div

Question

I want to find if the cursor is at the beginning of content editable div. I am using Internet Explorer 11. I have the following html and I wrote a javascript to return true if cursor is at the beginning. But my code always returns "false". Please help me how can I return true when cursor is in the beginning of the div i.e. before checkbox. It should return false otherwise (even if cursor is after the checkbox).

<!DOCTYPE>
<HTML>
<HEAD>
<script language="JavaScript">
function getSelectionTextDetail(element) {
    var atStart = false, atEnd = false;
    var selectionRange, temporaryRange;
    var selectedObject;
    if (window.getSelection) {
        selectedObject = window.getSelection();
        if (selectedObject.rangeCount) {
            selectionRange = selectedObject.getRangeAt(0);
            temporaryRange = selectionRange.cloneRange();
            temporaryRange.selectNodeContents(element);
            temporaryRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
            atStart = (temporaryRange.toString() === "");               
        }
    } 
    alert(atStart);
    //return atStart;
}
</script>
</HEAD>

<BODY>
<div style="border:solid 1px" contenteditable="true" onKeyUp="getSelectionTextDetail(this)">
<span style="font-family: Arial; font-size: 8pt;">
<input name="chk_O258" id="chk_O258" style="width: 12px; height: 12px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle;" type="checkbox" value="on">Cursor Position Test</span></div>
</BODY>
</HTML>

Possible duplicate of [Contenteditable DIV - how can I determine if the cursor is at the start or end of the content](http://stackoverflow.com/questions/7451468/contenteditable-div-how-can-i-determine-if-the-cursor-is-at-the-start-or-end-o) — jonny, Apr 21 '16 at 09:40
Hi Jonathan,Tried solution from the link but it won't work with my html. — Shrinath Shetty, Apr 21 '16 at 09:54
You're right, this is very interesting behaviour - it seems as though having the checkbox at the start prevents the cursor from ever reaching it somehow ([delete it with backspace and you'll see it works](https://jsfiddle.net/omgtoblerone/837pjxgm/)). Is it necessary that your input box be in the contenteditable div? — jonny, Apr 21 '16 at 10:00
Yes. It is necessary that input box be in the contenteditable div. — Shrinath Shetty, Apr 21 '16 at 12:15

Prashanth · Answer 1 · 2016-04-21T12:43:19.120

0

Haven't tested in IE, but try this:

<!DOCTYPE>
<HTML>
<HEAD>
<script language="JavaScript">
function getSelectionTextDetail(element) {
var atStart = false, atEnd = false;
var selectionRange, temporaryRange;
var selectedObject;
if (window.getSelection) {
    selectedObject = window.getSelection();

    if (selectedObject.rangeCount) {
        selectionRange = selectedObject.getRangeAt(0);
        temporaryRange = selectionRange.cloneRange();
        temporaryRange.selectNodeContents(element);
        temporaryRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
        check_string = temporaryRange.toString();
        atStart = (check_string.replace(/^\s+|\s+$/g, '') === "" && selectionRange.startOffset == 1);               
    }
} 
alert(atStart);
//return atStart;
}
</script>
</HEAD>

<BODY>
<div style="border:solid 1px" contenteditable="true" onKeyUp="getSelectionTextDetail(this)">
<span style="font-family: Arial; font-size: 8pt;">
<input name="chk_O258" id="chk_O258" style="width: 12px; height: 12px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle;" type="checkbox" value="on">Cursor Position Test</span></div>
</BODY>
</HTML>

edited Apr 21 '16 at 12:43

answered Apr 21 '16 at 09:58

Prashanth

241
1
7

Prashanth, thank you, but no luck with your solution. atStart returns "true" when you place the cursor before and after the checkbox. It should return true only when the cursor is before the checkbox. – Shrinath Shetty Apr 21 '16 at 12:16
1

Sorry did not read that part. Have edited my answer accordingly. Will try coming with a cleaner solution if possible. But hope this works. – Prashanth Apr 21 '16 at 12:44
Prashanth, your solution seems to be working. Thanks a lot man. – Shrinath Shetty Apr 21 '16 at 13:20
Np. Please accept the answer if you don't get anything else. Thanks. – Prashanth Apr 21 '16 at 13:26
Prashanth, your solution fails in one scenario. If the text inside the span tag has spaces in the beginning, it returns true when you place cursor in the beginning of the text: e.g.
Cursor Position Test
Note that text has one space in the beginning. – Shrinath Shetty Apr 22 '16 at 04:24

Check if cursor is at the begining of content editable div

1 Answers1