Selecting text in JQuery-UI tab header to clipboard

Question

For a page using JQuery-UI tabs, how can I allow users to select the text in the tab heading?

I have some dynamic tabs, and would like the users to be able to select the heading for copying to the clipboard.

For example on the Demo page, I would like to be able to select for copy/paste 'Nunc tincidunt'. 'Proin dolor', and 'Aenean lacinia'. Or even part of the heading (e.g. 'Proin', 'Aenean', 'tincidunt').

Answer 1

Here's a somewhat hacky way to replace the anchors that define the tabs with selectable <span> elements:

$(function() {
    $( "#tabs" ).tabs();

    $('.ui-tabs-anchor').each(function () {
        var anchorText = $(this).text(),
        tabIndex = $(this).attr('id').split('-')[2] - 1;

        $(this).hide();
        $('<span class="selectable-tab-header">' + anchorText + '</span>').insertAfter(this).data('tabIndex', tabIndex);
    });

    $('.selectable-tab-header').click(function () {
        $('#tabs').tabs('option', 'active', $(this).data('tabIndex'));
    });
});

Answer 2

I can propose Double-click selecting. You can use this code to determine the function and then just call it on double-click:

Function for select:

function select_all(el) {
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
    }
}

and then just call it on tab double-click:

$('#tabs').children('ul').children('li').children('a').dblclick(function() {
    select_all(this);
});

Here I created Demo for you: Demo

P.S: then you can use tool-tip title on tabs with textL "Double-Click to select text" or something like that, just for info.