Hi I want to have a ability to show the custom menu (or context menu) when a user selects some text much simillar to what medium provides.

How do implement this something like this? I am aware of native/jquery context menu plugins, but how do I know when the user selects the text? Browser's onselect seems to be supported only on input elements.

Hi I want to have a ability to show the custom menu (or context menu) when a user selects some text much simillar to what medium provides.

How do implement this something like this? I am aware of native/jquery context menu plugins, but how do I know when the user selects the text? Browser's onselect seems to be supported only on input elements.

• javascript
• jquery
• html

• 2 Have you taken a look at window.getSelection()? You could write your own listener for it, and the selectionchange event is supported on IE and Chrome/Safari (though not Firefox or Opera) – hotforfeature Commented Jul 29, 2014 at 15:09
• for not supported browsers u can add selection check via setInterval (its bad for perfomance, but will fix) – El' Commented Jul 29, 2014 at 15:20

1 Answer 1

Here is a pretty basic listener for .getSelection(): DEMO

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;
    }
    return t;
}

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

Instead of an alert, simply make your popup/toolbar visible. Hope this helps!

EDIT I changed the demo to show one possible way to show the popup menu/toolbar.