Jquery: run code when text is selected

Question

Hello!

I have a HTML document which llokes like this:

<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>

<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>

<div class="this_can_be_selected">Some text here</div>
<div>No text in the div above is selected</div>

I want text No text in the div above is selected to be changed to Some text in the div above is selected when, guess what, some of the text in the div above is selected :)

jQuery has a .select() event, that would make this rather easy to do, but seems, that it works when selected text is inside input or textarea.

Here is a code that I've tried:

$(document).ready(function()
    {

        //Some text inside div is selected
        $('DIV.this_can_be_selected').select
        (
            function()
            {
                alert('Something is selected!');
                $(this).next().html('Some text in the div above is selected');
            }
        );

    }
);

Nothing is happening.

Is there a way to solve this problem?

Answer 1

jQuery core doesn't have anything for this, but there are some plugin options.

Your code would look like this:

$(function() {
  $(document).bind('textselect', function(e) {
    alert('Selected Text: ' + e.text);
  });    
});

You can test it out here.