在内容可编辑<div>上设置光标位置

Question

我需要一个明确的跨浏览器解决方案，将游标/插入符号的位置设置为最后一个已知的位置，当内容编辑=‘on’<div>重新获得焦点时。内容可编辑div的默认功能似乎是每次单击div时将插入符号/光标移动到div中文本的开头，这是不可取的。我相信，当它们离开div的焦点时，我必须将当前光标的位置存储在变量中，然后当它们再次将焦点放在内部时，重新设置这个值，但是我还不能将它们放在一起，或者找到一个工作代码示例。如果有人有任何想法，工作代码片段或样本，我会很高兴看到他们。我还没有真正的代码，但下面是我所拥有的：<script type="text/javascript">// jQuery$(document).ready(function() {    $('#area').focus(function() { .. }  // focus I would imagine I need.}</script><div id="area" contentEditable="true"></div>PS。我尝试过这个资源，但它似乎不适用于<div>。可能只适用于TextArea(如何将光标移动到可内容实体的末尾)在内容可编辑<div>上设置光标位置

Answer 1

这与基于标准的浏览器兼容，但在IE中可能会失败。我把它作为起点。不支持DOM范围。

var editable = document.getElementById('editable'),
    selection, range;// Populates selection and range variablesvar captureSelection = function(e) {
    // Don't capture selection outside editable region
    var isOrContainsAnchor = false,
        isOrContainsFocus = false,
        sel = window.getSelection(),
        parentAnchor = sel.anchorNode,
        parentFocus = sel.focusNode;

    while(parentAnchor && parentAnchor != document.documentElement) {
        if(parentAnchor == editable) {
            isOrContainsAnchor = true;
        }
        parentAnchor = parentAnchor.parentNode;
    }

    while(parentFocus && parentFocus != document.documentElement) {
        if(parentFocus == editable) {
            isOrContainsFocus = true;
        }
        parentFocus = parentFocus.parentNode;
    }

    if(!isOrContainsAnchor || !isOrContainsFocus) {
        return;
    }

    selection = window.getSelection();

    // Get range (standards)
    if(selection.getRangeAt !== undefined) {
        range = selection.getRangeAt(0);

    // Get range (Safari 2)
    } else if(
        document.createRange &&
        selection.anchorNode &&
        selection.anchorOffset &&
        selection.focusNode &&
        selection.focusOffset    ) {
        range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
    } else {
        // Failure here, not handled by the rest of the script.
        // Probably IE or some older browser
    }};// Recalculate selection while typingeditable.onkeyup = captureSelection;
    // Recalculate selection after clicking/drag-selectingeditable.onmousedown = function(e) {
    editable.className = editable.className + ' selecting';};document.onmouseup = function(e) {
    if(editable.className.match(/\sselecting(\s|$)/)) {
        editable.className = editable.className.replace(/ selecting(\s|$)/, '');
        captureSelection();
    }};editable.onblur = function(e) {
    var cursorStart = document.createElement('span'),
        collapsed = !!range.collapsed;

    cursorStart.id = 'cursorStart';
    cursorStart.appendChild(document.createTextNode('—'));

    // Insert beginning cursor marker
    range.insertNode(cursorStart);

    // Insert end cursor marker if any text is selected
    if(!collapsed) {
        var cursorEnd = document.createElement('span');
        cursorEnd.id = 'cursorEnd';
        range.collapse();
        range.insertNode(cursorEnd);
    }};// Add callbacks to afterFocus to be called after cursor is replaced
    // if you like, this would be useful for styling buttons and so onvar afterFocus = [];editable.onfocus = function(e) {
    // Slight delay will avoid the initial selection
    // (at start or of contents depending on browser) being mistaken
    setTimeout(function() {
        var cursorStart = document.getElementById('cursorStart'),
            cursorEnd = document.getElementById('cursorEnd');

        // Don't do anything if user is creating a new selection
        if(editable.className.match(/\sselecting(\s|$)/)) {
            if(cursorStart) {
                cursorStart.parentNode.removeChild(cursorStart);
            }
            if(cursorEnd) {
                cursorEnd.parentNode.removeChild(cursorEnd);
            }
        } else if(cursorStart) {
            captureSelection();
            var range = document.createRange();

            if(cursorEnd) {
                range.setStartAfter(cursorStart);
                range.setEndBefore(cursorEnd);

                // Delete cursor markers
                cursorStart.parentNode.removeChild(cursorStart);
                cursorEnd.parentNode.removeChild(cursorEnd);

                // Select range
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                range.selectNode(cursorStart);

                // Select range
                selection.removeAllRanges();
                selection.addRange(range);

                // Delete cursor marker
                document.execCommand('delete', false, null);
            }
        }

        // Call callbacks here
        for(var i = 0; i < afterFocus.length; i++) {
            afterFocus[i]();
        }
        afterFocus = [];

        // Register selection again
        captureSelection();
    }, 10);};

Answer 2

此解决方案适用于所有主要浏览器：

saveSelection()连接到onmouseup和onkeyup事件，并将所选内容保存到变量中。savedRange.

restoreSelection()连接到onfocus事件，并重新选择保存在savedRange.

这是非常有效的，除非您希望在用户单击div时恢复所选内容(这有点非直观，通常您希望光标到您单击的位置，但代码是完整的)。

为了实现这一点，onclick和onmousedown事件被函数取消。cancelEvent()它是一个跨浏览器函数，用于取消事件。这个cancelEvent()函数还运行restoreSelection()函数，因为在取消单击事件时，div不会接收焦点，因此，除非运行此函数，否则不会选择任何内容。

变量isInFocus存储它是否在焦点中并被更改为“false”。onblur和“真实”onfocus..这允许只在div不在焦点时才取消单击事件(否则根本无法更改所选内容)。

如果希望在div通过单击来聚焦时更改所选内容，而不恢复所选内容onclick(并且只有在以编程方式将焦点分配给元素时，才使用document.getElementById("area").focus();或者类似的，然后简单地删除onclick和onmousedown事件。这个onblur事件和onDivBlur()和cancelEvent()在这种情况下也可以安全地删除函数。

如果您想要快速测试该代码，那么如果将它直接放到html页面的正文中，则该代码应该可以工作：

<div id="area" style="width:300px;height:300px;" onblur="onDivBlur();" onmousedown="return cancelEvent(event);
" onclick="return cancelEvent(event);" contentEditable="true" onmouseup="saveSelection();" onkeyup="saveSelection()
;" onfocus="restoreSelection();"></div><script type="text/javascript">var savedRange,isInFocus;function saveSelection(){
    if(window.getSelection)//non IE Browsers
    {
        savedRange = window.getSelection().getRangeAt(0);
    }
    else if(document.selection)//IE
    { 
        savedRange = document.selection.createRange();  
    } }function restoreSelection(){
    isInFocus = true;
    document.getElementById("area").focus();
    if (savedRange != null) {
        if (window.getSelection)//non IE and there is already a selection
        {
            var s = window.getSelection();
            if (s.rangeCount > 0) 
                s.removeAllRanges();
            s.addRange(savedRange);
        }
        else if (document.createRange)//non IE and no selection
        {
            window.getSelection().addRange(savedRange);
        }
        else if (document.selection)//IE
        {
            savedRange.select();
        }
    }}//this part onwards is only needed if you want to restore selection onclickvar isInFocus = false;function onDivBlur(){
    isInFocus = false;}function cancelEvent(e){
    if (isInFocus == false && savedRange != null) {
        if (e && e.preventDefault) {
            //alert("FF");
            e.stopPropagation(); // DOM style (return false doesn't always work in FF)
            e.preventDefault();
        }
        else {
            window.event.cancelBubble = true;//IE stopPropagation
        }
        restoreSelection();
        return false; // false = IE style
    }}</script>

Answer 3

我编写了一个跨浏览器范围和选择库，名为兰迪它包含了我在下面发布的代码的改进版本。您可以使用选择保存和恢复模块对于这个特殊的问题，虽然我很想用这样的方法@Nico Burns的回答如果您没有在项目中做其他的选择，并且不需要大量的库。