CODEWITHSUNDEEP
javascripthtmldomclipboard
Frankie
Frankie

Reputation: 1

Copy HTML Element with AHREF And Allowing Pasting to Word

Have a modal dialog that presents user with a ticket number that is formatted as a clickable object(URL). If you were to view the underlying HTML there is an A tag to the ticket number:https:/server/form/id?ticket number. If the user highlights the ticket number, does a right mouse click and Copy (not Copy link address) and then pastes that into MS Word, the ticket number is pasted and it retains the underlying URL embedded as a hyperlink. For some users highlighting the value without getting other surrounding text can be challenging. What I want to do is include a button that will run JavaScript that will perform that same action for them. I have been able to write the script that gets the URL from the A tag and put into the users Clipboard but pasting it into MS Word pastes the entire URL - which makes sense. Is there a way to copy to the clipboard what the user does manually?

Upvotes: 0

Views: 275

Answers (1)

EssXTee
EssXTee

Reputation: 1798

Notes

Firstly, when I answer questions, I first try to give a more generalized answer that is meant to be adapted. StackOverflow isn't a coding service and as such, the answers shouldn't answer 1 single use-case but rather, as many as possible so when other users come across a question similar to theirs, the answers can still be useful.

Relevant Answer

That being said, How do I copy to the clipboard in JavaScript seems to cover what OP is asking for. I am posting this answer to explain how/why it answers OP's question.

There are 3 methods given in the accepted answer on that post. The first method (Async Clipboard API) is going to typically be what people use. The second method is deprecated. The final method (Overriding the copy event) isn't covered in detail but applies to OP's question.

Applying the Answer

Using the first method, a button (or other actionable element) could be added to the page to copy data to the clipboard. Based on OP's question, the only other thing needed here is getting the user's selection. The MDN Web Doc for the user selection on a page covers this and a lot more, but the basic thing needed here is window.getSelection().toString(), which will get the currently selected text (text only, no element information).

Method 1

const _CopyText = () => {
  navigator.clipboard.writeText(window.getSelection().toString());
  console.log(window.getSelection().toString());
}
<div>
  <p>This is random text just to fill space. Its <b>only purpose</b> is to create the appearance of content on a page. <span style="color: #00F;"><b><i>This is random text</i></b></span> just to fill space. Its only purpose is to create the appearance of content on a page.<p>
  <p>This is random text just to fill space. Its <a href="https://google.com">only purpose</a> is to create the appearance of content on a page.</p>
</div>
<input type="button" value="Copy Text" onclick="_CopyText()">
<br>
<textarea style="width: 40em; height: 5em;"></textarea>

Method 2

This method actually involves manipulating what is currently being copied by the user. For this example the focus is just to convert the copied information into text only (removing any additional information such as URLs or formatting). With this, we are using the 3rd method discussed in the linked post regarding Overriding the copy event.

document.addEventListener("copy", e => {
  e.clipboardData.setData("text", window.getSelection().toString());
  e.preventDefault();
});
<div>
  <p>This is random text just to fill space. Its <b>only purpose</b> is to create the appearance of content on a page. <span style="color: #00F;"><b><i>This is random text</i></b></span> just to fill space. Its only purpose is to create the appearance of content on a page.<p>
  <p>This is random text just to fill space. Its <a href="https://google.com">only purpose</a> is to create the appearance of content on a page.</p>
</div>
<input type="button" value="Copy Text" onclick="_CopyText()">
<br>
<textarea style="width: 40em; height: 5em;"></textarea>

Additional Notes

Places like the CodePen and the StackOverflow snippets have limited or no access to certain features (such as the clipboard API). So saying 'it doesn't work' when you try the snippets is not due to failed code. Please use the code and all references to learn and then adapt the code for any specific needs and use-cases.

Upvotes: 0

Related Questions