Capturing "Selstart", "Sel..end" within a non-input element

Question

I'm setting up a table, formatted like this.. Please forgive the silly sample data. All of this is actually loaded with json, but the output looks like this:

<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>

Using mousedown on $("#famequotes td"), and mouseup, I can allow users to highlight text and capture the start and end row, and similarly capture all the rows in between with onmouseover.

What I want to do is capture the SelStart of the start row (the table cell I started highlighting from) and the sel...stop of the last row.

I have not been able to find an answer, though I have researched and google searched already.

MIchal Hainc's answer is really cool, but not what I am seeking.

I can see how the selection box could be useful, and I would love to incorporate it.

However, what I'm actually seeking is so that if the user highlights text as I've highlighted in http://jsfiddle.net/vhyyzeog/1/ it would return 3 for selStart and 12 for selEnd. I'm already tracking the first highlighted row, and the last, so I know what rows to apply selstart and selend to.

Thank you for any help.

score 1 · Answer 1 · answered Aug 21 '14 at 08:39

I have constructed a fiddle for you here: http://jsfiddle.net/jra9ttot/16/

I have used jQuery UI widget "selectable"... the javascript is like this:

You can select like in windows explorer... drag a lasso with the mouse over your table cells, it will select multiple...

    $(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>');
            }
        });
    });

Thank you, and this is wonderful, but it's not what I'm seeking. I amended my question. Voted up for the effort though, and because it helps me solve a different problem. — Regular Jo, Aug 21 '14 at 21:44

score 1 · Accepted Answer · edited May 23 '17 at 12:12

I found an answer to this question elsewhere on Stack's site. It's not as pretty and perfect as I'd imagined it might be.

Source: Hussein's answer to "Get selected text's html in div"

Here's sort of the groundwork for how you can obtain useful data from this, if you want more than the basic selected text.

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

It's not quite what I'd imagined, but it definitely provides the elements I need to accomplish my task.

Capturing "Selstart", "Sel..end" within a non-input element

MIchal Hainc's answer is really cool, but not what I am seeking.

2 Answers2