Jump to content
Robin S

Copying the text from an inputfield header

Recommended Posts

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.

unselectable.gif.d703b993ec1093559f15cfeded7ee6bf.gif

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:

2019-01-15_115219.png.750f83cd3357c3a8c3c65fd53aa5cdd9.png

The solution in action:

text.gif.dde7be47037c03c586e09036add047da.gif

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.

  • Like 8

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites
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. 🙂 

  • Like 1

Share this post


Link to post
Share on other sites

I would probably use such CSS instead:

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

 

  • Like 3

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...