Copying the text from an inputfield header

[Robin S]

A little solution that maybe helps someone...

Often when I'm writing documentation for a site I want to get the label text from an inputfield header so I can paste it into the document. But the problem is that you cannot drag a selection around the header label in order to copy the text.

So as a solution I used a bit of jQuery to get the label text when the inputfield header is Alt+clicked.

$(function() {
	// If an InputfieldHeader is clicked...
	$(document).on('click', '.InputfieldHeader', function(event) {
		// And the Alt key is down...
		if(event.altKey) {
			// Get the header text, excluding that within the AdminOnSteroids field edit link
			var text = $(this).clone().find('.aos_EditField').remove().end().text();
			// Copy the text to the clipboard
			copyToClipboard(text);
		}
	});
});

// Copy a string to the clipboard
function copyToClipboard(string) {
	var $temp = $('<input type="text" value="' + string + '">');
	$('body').append($temp);
	$temp.select();
	document.execCommand('copy');
	$temp.remove();
}

I added this to the PW admin using the Asset Paths feature of the AdminOnSteroids module:

The solution in action:

Okay, so those are short labels and I could have just typed them out by hand. But some labels are longer, copy/pasting reduces the chance of typos, I'm lazy, time is money, etc.

[adrian]

Nice - much better than my "Inspect Element" approach ?

[Robin S]

7 minutes ago, adrian said:

much better than my "Inspect Element" approach

Yeah, that's what I have been doing up until now when the irritation finally became too much. ? 

[tpr]

I would probably use such CSS instead:

*:not(.pw-no-select) {
    user-select: text;
}

 

[Robin S]

1 hour ago, tpr said:

I would probably use such CSS instead

Thanks! A little tricky on text fields because clicking the header focuses the input before you have a chance to copy the selection, but if you keep the mouse button down it's doable. Great tip!