Hide Text, But Have It Show Up If Copied and Pasted Without JavaScript

Hide text, but have it show up if copied and pasted without javascript

This is a possible solution to this problem, however it may or may not be appropriate.

Only appears after pasting

Potentially if you want it to only appear in the pasted text (rather than when it's highlighted) you could make the font take up no space, so it can be hidden between the other text e.g.

div {
  color: #000;
  background-color: #FFF;
}

.hidden{
  font-size: 0;
}

<div>
  This is visible. 
  <span class="hidden">This is not.</span>
  (Copy and paste this to see the hidden line)
</div>

Html and Internet Explorer: How to avoid hidden elements to be copied/pasted

It seems like this question has been asked before multiple times. (1) - (2)

It seems like there has not been a response that works fine for everyone.

You could use is.(':visible') in jQuery but not sure that translates back to javascript (not very good at it).

Other people have suggested cloning the table and only copying what's in the other table which is hidden, but then that causes a problem later on with other browsers which work fine.

You could use the above method which would work but it's a nasty hack.

There is an answer here which may be of interest to you, however I'm not sure what you're trying to copy and if this is worth the effort.

<joke>

If all else fails, here are some other recommendations:

change users
force users to change browser
render only visible cells and change server code

</joke>

Copy text from a hidden control using JavaScript

Use style ='display:block; width:0; height:0; opacity: 0;' instead of visibility

<head><script type='text/javascript'>function c2cb () {document.getElementById("txtInvoice").select();document.execCommand('copy');}</script></head><body ><form id="frmAdminConsole" name="frmAdminConsole" METHOD="POST">
<textarea id='txtInvoice' cols='80' style='display:block; width:0; height:0; opacity: 0;'>

        46

JOHN SMITHGAEL SCOIL NA BFHAL34 A IVEAGH CRESENTBELFASTBT12 6AW

Bubble Ball Football [2017-02-03 09:00]     20  190.00Nerf Wars [2017-02-05 10:00]    14  190.00TeamTrek [2017-02-06 12:00]     20  0.00</textarea>
<input type="button" value="Copy!" onclick="c2cb()">

How to see the hidden formats that get copied when copying HTML content?

What you are trying to do is export standalone HTML. Your question is not entirely clear, but I'm assuming you're trying to retrieve it from a page under your control, and you can thus run Javascript.

This means that, at runtime, you need to determine the effective 'computed' styles for every element, and apply them to the element itself. After that you can simply read and process the innerHTML of the containing element to retrieve your standalone content.

Read the excellent answers on this question to see how to retrieve the runtime calculated style of every element. Then apply each of them explicitly to the element itself through its style property. The innerHTML property will reflect these changes in the returned value.

If the webpage you're trying to do this on is not under your control, you could always inject the same code using for example GreaseMonkey for Firefox or TamperMonkey for Chrome. This would make it enough of a 'universal tool'.

display:none content copied to clipboard, visible when pasted

It sounds like you need to have the JavaScript create the DOM sections rather than just changing CSS styles. Instead of changing the display property of the "I'm hidden" paragraph, have the JavaScript create that element when you want it to display, and remove it whan you want to hide it.

If the elements are complicated enough, then perhaps you can have them at the bottom of the document with "display:none", but then move them into the place where you want them visible.

Copy text to clipboard from hidden input is not working in jQuery

You can try to change the type of the input to text before select then, and bring the type hidden back after like that.

$("button").on("click", function() {  var n = $("#copyMe").text();  $(".copied").attr("value", n);  $(".copied").attr("type", "text").select();  document.execCommand("copy")  $(".copied").attr("type", "hidden")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p id="copyMe">This is the copied text!</p><input type="hidden" class="copied"/><button>COPY</button><input type="text" placeholder="paste copied text here"/>

Hidden text that can be dragged from the browser?

Instead of manipulating the browser's default behavior for dragging text/links/images, you want to set the data to something arbitrary in the dragstart event.

For example, use the text from a hidden #content:

$('[draggable]').on('dragstart', function(e) {
    var content = $(this).find('#content').text(); // Can be anything you want!
    e.originalEvent.dataTransfer.setData('text/plain', content);
    $(this).addClass('dragging');
});

Here is a working JSFiddle

Hide Text, But Have It Show Up If Copied and Pasted Without JavaScript