Javascript触发器选择开始

时间:2012-11-06 13:38:59

标签: javascript browser triggers selection

可以通过javascript / jQuery触发选择开始吗?

在我看来,鼠标文本选择可以分为以下几个步骤:

  

1)触发 mousedown 事件并开始选择

     

2)触发 mousemove 并移动选择的“终点”

     

3)触发 mouseup 并停止选择

可以触发步骤1),即在span元素中的文本... ...所以在那之后,移动鼠标光标的行为就像选择等待鼠标一样?

如何实施浏览器如何知道选择的开始?

Rangy library:我知道这个用于创建自定义范围选择的javascript库。但是在我看来,通过鼠标事件模拟自己的选择太复杂了。我只想告诉浏览器,我开始选择(span,offset 2),它应该继续第2步

1 个答案:

答案 0 :(得分:1)

您可以在可选元素和文档上使用鼠标事件来控制何时开始和结束选择以及何时要测试选择等。

然后在选择期间,您可以使用window.getSelection()获取有关当前选择的信息。

尝试这样的事情:

var m_MouseDown = false;

document.getElementById('selectMyContent').onmousedown = function (e) {
    m_MouseDown = true;
};

document.onmouseup = function (e) {
    m_MouseDown = false;
};

document.onmousemove = function(e) {
    if (m_MouseDown) {
        document.getElementById('showTextHere').innerHTML = getSelectionInfo();
    }        
}

function getSelectionInfo() {
    var selected = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                var range = sel.getRangeAt(i);

                var txt = document.createElement('div');
                txt.appendChild(range.cloneContents());
                selected = range.startContainer.parentNode.id + ':' + range.startOffset + '-' + range.endOffset + ' "' + txt.innerHTML + '"';
            }
        }
    }
    return selected;
}

有关示例,请参阅http://jsfiddle.net/nY328/10/