javascript – 双击时div中的文本选择(contenteditable)

我有一些文本div和contenteditable =“true”.当我单击这个div – 工作一些我的脚本时,它不是很重要.当我双击这个div时 – 需要编辑div中的文本.编辑文本只需要在双击之后,而不是单次之后.而且非常重要,当我双击div时 – 插入符号需要留在鼠标光标下.不需要选择文字.我发现了一些单/双脚本.但有问题.当我双击div – 文本是选择.选择没有必要.需要我点击的编辑器插入符号.我不明白怎么做.
http://jsfiddle.net/X6auM/

解决方法

每个当前的主要浏览器都提供了一个API来创建鼠标事件的范围,尽管需要四个不同的代码分支.

这是一些背景：

> https://stackoverflow.com/a/10659990/96100
> https://stackoverflow.com/a/12705894/96100
> Creating a collapsed range from a pixel position in FF/Webkit

这是一个演示：http://jsfiddle.net/timdown/krtTD/10/

这里是一些代码：

function getMouseEventCaretRange(evt) {
    var range,x = evt.clientX,y = evt.clientY;
 
    // Try the simple IE way first
    if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToPoint(x,y);
    }
 
    else if (typeof document.createRange != "undefined") {
        // Try Mozilla's rangeOffset and rangeParent properties,// which are exactly what we want
        if (typeof evt.rangeParent != "undefined") {
            range = document.createRange();
            range.setStart(evt.rangeParent,evt.rangeOffset);
            range.collapse(true);
        }
 
        // Try the standards-based way next
        else if (document.caretPositionFromPoint) {
            var pos = document.caretPositionFromPoint(x,y);
            range = document.createRange();
            range.setStart(pos.offsetNode,pos.offset);
            range.collapse(true);
        }
 
        // Next,the WebKit way
        else if (document.caretRangeFromPoint) {
            range = document.caretRangeFromPoint(x,y);
        }
    }
 
    return range;
}
 
function selectRange(range) {
    if (range) {
        if (typeof range.select != "undefined") {
            range.select();
        } else if (typeof window.getSelection != "undefined") {
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}
 
document.getElementById("editor").ondblclick = function(evt) {
    evt = evt || window.event;
    this.contentEditable = true;
    this.focus();
    var caretRange = getMouseEventCaretRange(evt);
 
    // Set a timer to allow the selection to happen and the dust settle first
    window.setTimeout(function() {
        selectRange(caretRange);
    },10);
    return false;
};

javascript – 双击时div中的文本选择(contenteditable)

解决方法

猜你在找的JavaScript相关文章