Javascript 检查光标是否位于内容可编辑div的开头_Javascript

Javascript 检查光标是否位于内容可编辑div的开头

javascript

Javascript 检查光标是否位于内容可编辑div的开头,javascript,Javascript,我想确定光标是否位于content editable div的开头。我正在使用Internet Explorer 11。我有下面的html，我编写了一个javascript，如果游标在开头，它将返回true。但我的代码总是返回“false”。请帮助我如何在光标位于div开头（即before复选框）时返回true。否则应返回false（即使光标位于复选框之后）函数getSelectionTextDetail（元素）{ var atStart=false，atEnd=false；变量选择范围，

我想确定光标是否位于content editable div的开头。我正在使用Internet Explorer 11。我有下面的html，我编写了一个javascript，如果游标在开头，它将返回true。但我的代码总是返回“false”。请帮助我如何在光标位于div开头（即before复选框）时返回true。否则应返回false（即使光标位于复选框之后）


函数getSelectionTextDetail（元素）{
var atStart=false，atEnd=false；
变量选择范围，时间范围；
var选择对象；
if（window.getSelection）{
selectedObject=window.getSelection（）；
如果（selectedObject.rangeCount）{
selectionRange=selectedObject.getRangeAt（0）；
temporaryRange=selectionRange.cloneRange（）；
时间范围。选择节点内容（元素）；
temporaryRange.setEnd（selectionRange.startContainer，selectionRange.startOffset）；
atStart=（temporaryRange.toString（）=”）；
}
} 
警报（启动时）；
//开始时返回；
}
光标位置测试

尚未在IE中测试，但请尝试以下方法：

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


函数getSelectionTextDetail（元素）{
var atStart=false，atEnd=false；
变量选择范围，时间范围；
var选择对象；
if（window.getSelection）{
selectedObject=window.getSelection（）；
如果（selectedObject.rangeCount）{
selectionRange=selectedObject.getRangeAt（0）；
temporaryRange=selectionRange.cloneRange（）；
时间范围。选择节点内容（元素）；
temporaryRange.setEnd（selectionRange.startContainer，selectionRange.startOffset）；
检查_string=temporaryRange.toString（）；
atStart=（选中_string.replace（/^\s+\s+$/g'，）==“”&&selectionRange.startOffset==1）；
}
} 
警报（启动时）；
//开始时返回；
}
光标位置测试

Hi Jonathan的可能重复，尝试了链接中的解决方案，但无法与我的html一起使用。没错，这是一个非常有趣的行为-似乎在开始时有复选框可以防止光标以某种方式到达它（）。您的输入框是否必须位于contenteditable div中？是的。输入框必须位于contenteditable div.Prashanth中，谢谢，但您的解决方案没有成功。在复选框前后放置光标时，atStart返回“true”。只有当光标位于复选框之前时，它才应返回true。抱歉，没有阅读该部分。我已经相应地编辑了我的答案。如果可能的话，我们将尝试使用更清洁的解决方案。但希望这能奏效。普拉善，你的解决方案似乎奏效了。谢谢你，伙计。如果你没有得到任何其他答案，请接受这个答案。谢谢。Prashanth，你的解决方案在一个场景中失败了。如果span标记内的文本开头有空格，则将光标放在文本开头时返回true：例如，光标位置测试注意文本开头有一个空格。

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