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').

Seljuk

Small tip: at least in Chrome, when the user right clicks the tab title, the title is selected ;). I realize this doesn't help much selecting part of the tab's title. I've looked thru the code of the jQuery UI's tab but didn't see any obvious prevention of selection. Must be a byproduct of preventing the default behaviour of clicking the tab element. – Furcula

I did too. Was hoping that there was something that I missed or a function that I could override. But that looks like no dice. – Seljuk

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

Sauter

Just a note with this solution, You need to modify the jquery-ui css to add the padding around the span to get the header to look the same as with the anchor elements. – Seljuk

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.

Intervene

Answer 3

The UI tabs already handle the selection state by using the UI selectable interaction. This is how jQuery knowns which tab to currently display the contents for. So when a user selects a tab, it's made active and the contents are shown.

What you could do is add a copy icon to the tab. When clicked, the tab's title is copied to the clipboard. This would work much like the manipulation example. Except instead of showing a close icon. You could use the ui-icon-copy.

Here is an example.

Buchenwald

What about the use case where my users want to select part of the heading? And, it isn't that straightforward to add to the clipboard from javascript. – Seljuk

Most browsers don't allow JS to copy to the clipboard. It's a security issue. #400712 – Buchenwald

So then, how can I allow users to select the text for copying to the clipboard? – Seljuk

Nothing is stopping the user from copying to the clipboard. You just can't do it for them via Javascript. They must select the text and press CTRL+C or Copy via the browser's menu. – Buchenwald

Right, which is my problem. Due to something in the tabs, users cannot select the text so that they can do CTRL+C. I want to know what needs to be done to allow this to happen. Even if it is only for the active tab. – Seljuk

You'll have to place an input field in the tab location with the tab contents. Take a look at this. appelsiini.net/projects/jeditable – Buchenwald

Answer 4

I've tried to answer your question in a fiddle: http://jsfiddle.net/vcarluer/Rfw3t/

The idea: show an html input when clicking on current header to enable text selection by user.

<li id="li-1"><a id ="a1" href="#fragment-1">Nunc tincidunt</a>
 <div id="divText-1" class="tabText">
 <input id="input-1" size="13" readonly/>
 </div>
 <button id="copyToClipBoard-1" class="ccButton">cc</button>
</li>

$("#a1").click(function(e) { if (selected == 0) { $("#divText-1").show(); $("#input-1").val("Nunc tincidunt"); $("#input-1").focus(); } selected = 0; });
$("#input-1").blur(function(e) { $("#divText-1").hide(); });

If you open it with IE you will find too a 'cc' button to copy header to clipboard (only work with IE)

var headerText = $("#a2").text();
window.clipboardData.setData('text', headerText);

I am not good with javascript and too lazy so I let you refactor code and function call because there are a lot of copy paste code. You can remove input border too and align it correctly, or not... I let the border for you to see the input and div overlay. Css is bad too but you have the idea.

I hope it will help you.

Fortitude

Answer 5

For what it's worth, the tabs DO allow for selection you just have to be precise about where you start your selection click.

Found this answer by combining a few SO articles on text selection and mouse clicking. This works in conjunction with the jquery ui tabs. Credit to SO's Jason for the text selection and to SO's Acorn for the mouse right click detection and to myself for combining it all :). This will select the tab text and open the standard context menu for copying:

function SelectText(element) {
    var doc = document,
        text = doc.getElementById(element),
        range, selection;
    if (doc.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(text);
        range.select();
    } else if (window.getSelection) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

$(function () {
    $('a[href^="#tabs"]').mousedown(function (event) {
        if (event.which == 3) { //right click
            SelectText($(this).attr('id'));
        }
    });
});

Fiddle

Amniocentesis

I am able to do it when I start my selection outside of the tab. However, I am not able to find the "precise" spot to get a selection with any sort of control. – Seljuk