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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...