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 ie 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>

Answer 1

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>

Check if cursor is at the begining of content editable div

Question

1 answers

solution1
0 2016-04-21 09:58:36

Check if cursor is at the begining of content editable div

Question

1 answers

solution1 0 2016-04-21 09:58:36

solution1
0 2016-04-21 09:58:36