在非输入元素中捕获“Selstart”、“Sel..end”答案

【问题标题】：Capturing "Selstart", "Sel..end" within a non-input element在非输入元素中捕获“Selstart”、“Sel..end”
【发布时间】：2015-02-03 10:43:06
【问题描述】：

我正在设置一个表格，格式如下。请原谅愚蠢的示例数据。所有这些实际上都是用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。

虽然我已经进行了研究和谷歌搜索，但我还没有找到答案。

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

我可以看到选择框有什么用处，我很想将其合并。

但是，我真正想要的是，如果用户突出显示我在http://jsfiddle.net/vhyyzeog/1/ 中突出显示的文本，它将为 selStart 返回 3，为 selEnd 返回 12。我已经在跟踪突出显示的第一行和最后一行，所以我知道要应用 selstart 和 selend 到哪些行。

感谢您的帮助。

【问题讨论】：

标签： javascript jquery highlight

【解决方案1】：

我在这里为你构建了一个小提琴：http://jsfiddle.net/jra9ttot/16/

我使用了 jQuery UI 小部件“可选”... 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>');
            }
        });
    });

【讨论】：

谢谢，这很好，但这不是我想要的。我修改了我的问题。不过为这项工作投了赞成票，因为它帮助我解决了另一个问题。

【解决方案2】：

我在 Stack 网站的其他地方找到了这个问题的答案。它并不像我想象的那么漂亮和完美。

来源：Hussein's answer to "Get selected text's html in div"

如果您想要的不仅仅是基本的选定文本，这里是您如何从中获取有用数据的基础工作。

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);
    });
});

这和我想象的不太一样，但它确实提供了我完成任务所需的元素。

【讨论】：