How can I detect text selected in a div?

Question

I have lines of text generated by ng-repeat, displayed within a div. I would like the user to be able to select from those lines and press a button, and have the application know which lines the user selected

Is there any way to do that in AngularJS

I really wish people would have the courtesy and good sense to add a comment explaining why the checked down a question — Victor Grazi, Dec 28 '14 at 13:24

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

In order to capture selected text in a browser, try the Rangy library. I have created a small example of how to use it. I'm sure you can expand it to match your needs.

If you need to take action immediately after user select the text (without button), you should listen for mouseup event. The following directive should help:

angular.module('myModule').directive('watchSelection', function() {
    return {
        link: function(scope, element) {
            element.on('mouseup', function(event) {
                var selection = rangy.getSelection();
                // do something with selected text
            });
        }
    };
});

You may also find this answer interesting.

Excellent library! Thanks for the tip – Victor Grazi Dec 28 '14 at 16:01 — Victor Grazi, Dec 28 '14 at 16:01

How can I detect text selected in a div?

1 Answers1