在非輸入元素中捕獲“ Selstart”，“ Sel..end”

Question

我正在建立一個表格，其格式如下：。請原諒愚蠢的示例數據。 所有這些實際上都是用json加載的，但是輸出看起來像這樣：

<table id="famequotes">
<tr><td id="par001">It was the best of times, it was the worst of times.</td></tr>
<tr><td id="par002">Two things are infinite: the universe and human stupidity; and I'm not sure about the universe</td></tr>
<tr><td id="par003">In the jungle, the mighty jungle, the lion sleeps tonight...</td></tr>
</table>

使用$（“＃famequotes td”）上的mousedown和mouseup，我可以允許用戶突出顯示文本並捕獲開始和結束行，並且類似地使用onmouseover捕獲之間的所有行。

我想要做的是捕獲開始行的SelStart（我從此處開始突出顯示的表格單元格）和最后一行的sel ... stop。

盡管我已經進行了研究並已在Google上進行搜索，但我仍無法找到答案。

MIchal Hainc的回答確實很酷，但不是我想要的。

我可以看到選擇框如何有用，並且我希望將其合並。

但是，我實際上要查找的是這樣，如果用戶像我在http://jsfiddle.net/vhyyzeog/1/中突出顯示的那樣突出顯示文本，則selStart返回3，selEnd返回12。 我已經在跟蹤突出顯示的第一行和最后一行，因此我知道要應用selstart和selend的行。

感謝您的任何幫助。

Answer 1

我在這里為您制作了一個小提琴： http : //jsfiddle.net/jra9ttot/16/

我已經使用了jQuery UI小部件“ selectable” ... javascript是這樣的：

您可以像在Windows資源管理器中一樣進行選擇...用鼠標將套索拖動到表格單元格上，它將選擇多個...

    $(document).ready(function () {
        $('#famequotes').selectable({
            filter: 'td',
             start: function (event, ui) {
                $('#log').append('<div>selction start: ' + $(event.toElement).attr('id') + '</div>');
            },
            selected: function (event, ui) {
                $('#log').append('<div>selected item: ' + $(ui.selected).attr('id') + '</div>');
            },
            stop: function (event, ui) {
                var lastSelElem = $('#famequotes').find('td.ui-selected').last();
                 $('#log').append('<div>selection end: ' + $(lastSelElem).attr('id') + '</div>');
            }
        });
    });

Answer 2

我在Stack網站的其他地方找到了這個問題的答案。 它沒有我想象的那么漂亮和完美。

來源： 侯賽因對“在div中獲取選定文本的html”的回答

如果您想要的不只是基本的選定文本，這是如何從中獲取有用數據的基礎。

http://jsfiddle.net/YstZn/541/

if (!window.x) {
    x = {};
}

x.Selector = {};
x.Selector.getSelected = function() {
    var t = '';
    if (window.getSelection) {
        t = window.getSelection();
    } else if (document.getSelection) {
        t = document.getSelection();
    } else if (document.selection) {
        t = document.selection.createRange().text;
    }
    console.log(window.getSelection().anchorNode.parentNode);
    console.log(window.getSelection().focusNode.parentNode);
    return t;
}

$(document).ready(function() {
    $(document).bind("mouseup", function() {
        var mytext = x.Selector.getSelected();
        alert(mytext);
    });
});

這不是我想象的那樣，但是它確實提供了完成任務所需的要素。