If I copy an html table manually, I can paste it into a Google Doc with the formatting preserved (it looks like a table).
How can I copy the contents programmatically, with a button, and paste as an html table? Something like the following...
evar copydeck = $("<div>").html(htmlToInsert);
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();
The above code does not work...but this does:
copydeck = $("<textarea>").val(this.list.join("\r\n"));
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();
I guess it is because the element must be selectable - like an input or htmlarea field. But they can't hold html (or it is just plain text, not html).
Any way to copy and paste HTML?
Yes!
function copy() {
var target = document.getElementById('my-div');
var range, select;
if (document.createRange) {
range = document.createRange();
range.selectNode(target)
select = window.getSelection();
select.removeAllRanges();
select.addRange(range);
document.execCommand('copy');
select.removeAllRanges();
} else {
range = document.body.createTextRange();
range.moveToElementText(target);
range.select();
document.execCommand('copy');
}
}
<div id="my-div" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;">
Hello stackoverflow!))
</div>
<div>
<input onclick="copy()" type="button" value="Copy">
</div>
Related
How to copy text from a div to clipboard.
What I can do then only get one data in clipboard .
<div id="div1">Text To Copy</div>
<div id="div2">Text To Copy</div>
<div id="div3">Text To Copy</div>
<div id="div4">Text To Copy</div>
<script>
function copyDivToClipboard() {
var range = document.createRange();
range.selectNode(document.getElementById("e.target(id)"));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
}
</script>
You can try it this way. Call the function on onclick event
function copyDivToClipboard(id) {
var range = document.createRange();
range.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
alert("Text Copied: "+range);
}
<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>
I was also stuck in same kind of problem. I found the solution.
If you want to show the message in the same div do this, just try
function copyDivToClipboard(id) {
var range = document.createRange();
oldvalue = document.getElementById(id).innerHTML;
range.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
document.getElementById(id).innerHTML = "Text Copied";
setTimeout(function(){document.getElementById(id).innerHTML = oldvalue }, 2000); //you can change the time
}
<div id="div1" onclick="copyDivToClipboard(this.id);">Text To Copy div1</div>
<div id="div2" onclick="copyDivToClipboard(this.id);">Text To Copy div2</div>
<div id="div3" onclick="copyDivToClipboard(this.id);">Text To Copy div3</div>
<div id="div4" onclick="copyDivToClipboard(this.id);">Text To Copy div4</div>
You can also do this if you are using jQuery
$("div").click(function(e){
var range = document.createRange();
range.selectNode(document.getElementById(e.target.id));
window.getSelection().removeAllRanges(); // clear current selection
window.getSelection().addRange(range); // to select text
document.execCommand("copy");
window.getSelection().removeAllRanges();// to deselect
console.log("Text Copied: "+range);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div1">Text To Copy1</div>
<div id="div2">Text To Copy2</div>
<div id="div3">Text To Copy3</div>
<div id="div4">Text To Copy4</div>
I think shirshak007 answered. But I would like to share an alternative code snippet to it.
<script>
function CopyToClipboard(id) {
var copyBoxElement = document.getElementById(id);
copyBoxElement.contenteditable = true;
copyBoxElement.focus();
document.execCommand("copy");
copyBoxElement.contenteditable = false;
alert("Text has been copied : " + copyBoxElement.innerHTML)
}
</script>
<div id="div1" onclick="CopyToClipboard(this.id)">Codebay</div>
<div id="div2" onclick="CopyToClipboard(this.id)">Software</div>
I have a field where a user can input raw HTML. This looks like:
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
Now, I need a "copy to clipboard" button that takes the content of this field in such a way that we can paste it as formatted text (without the HTML markup). In the example above, the copy/paste output should be:
Hi,
Here is a [link][1] I'd like you to visit.
I've implemented the "copy to clipboard" button like this:
let answer = document.getElementById("editor");
answer.select();
document.execCommand("copy");
This places the content of the input on the clipboard, however when I paste it elsewhere I get the raw HTML.
I need some way to convert HTML into formatted text, but the only solution I found is this and it doesn't work for links:
enter link description here
Is there a native Javascript way to do this? If not, what is the best solution?
Try with Element.insertAdjacentHTML()
let answer = document.getElementById("editor");
let result = document.getElementById("result");
let button = document.getElementById("button");
button.onclick = function() {
answer.select();
document.execCommand("copy");
};
function conVert(event) {
event.preventDefault();
let val = answer.value
console.log(val)
result.insertAdjacentHTML('afterbegin', val);
// you can use event.target here to past it as formated to targeted element onpaste
}
// on button
buttonpaste.onclick = function(event) {
conVert(event)
}
//on paste
document.onpaste = function(event) {
console.log("Paste")
conVert(event)
};
#result {
min-height: 100px;
background-color: yellow
}
#result2 {
min-height: 100px;
background-color: gray;
}
<input type="text" id="editor" value="<p>Hi,</p><p>Here is a <a href='domain.com'>link</a> I'd like you to visit.</p>" />
<button id="button">COPY</button>
<button id="buttonpaste">PASTE</button>
<div id="result" contentEditable="true"></div>
<div id="result2" contentEditable="true"></div>
I have a contenteditable div whose initial content is set at runtime on the server side. The user then needs to be able to make edits on the client side (thus contenteditable). The user then needs to be able to copy the edited contents of txtDiv with a copy button.
I have tried the code below, but I need for it to work on txtDiv not myInput. Also, it does not work on myInput if I add runat="server" to myInput.
This works as expected:
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied");
}
</script>
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
I need this to work:
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("txtDiv").innertext;
/* Select the text field */
copyText.select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied");
}
</script>
<!-- The text field -->
<div id="TxtDiv" runat="server" AutoPostBack="True" aria-multiline="True" contenteditable="true"
style="z-index: 1; text-align:left; border:1px solid; overflow-y:scroll; height: 82px"></div>
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>
The user then needs to be able to copy the editted contents of txtDiv with a copy button.
The partial answer at https://forums.asp.net/t/2157977.aspx?How+to+copy+innertext+from+a+contenteditable+div+whose+initial+value+is+set+on+the+server+side+ provided by #Wei got me 90% of the way to the answer. The only thing that I would add is two things: 1) Hyphens are not allowed in control names in the code behind so "my-div" cannot be used if you want to access that control from the code behind. 2)The div needs to be on the client side and you cannot set the innerhtml property from the code behind since the control is not on the server. To get around this I put a span and a server literal into the innerhtml of the div. Now I can set the text of the literal using html constructed in the code behind and it results in the desired output in the div.
The final code that works is:
<script>
function copy() {
var target = document.getElementById('mydiv');
var range, select;
if (document.createRange) {
range = document.createRange();
range.selectNode(target)
select = window.getSelection();
select.removeAllRanges();
select.addRange(range);
document.execCommand('copy');
select.removeAllRanges();
} else {
range = document.body.createTextRange();
range.moveToElementText(target);
range.select();
document.execCommand('copy');
}
}
</script>
<div id="mydiv" contenteditable="true" style="z-index: 1; text-align:left; border:1px solid; overflow-y:scroll; height: 82px"><span><asp:Literal ID="Literal1" runat="server"></asp:Literal></span></div>
<div><input onclick="copy()" type="button" value="Copy" /></div>
And the code behind is:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Literal1.text="<span style='color:#d9534f'> Red </span><span style='color:#0275d8'> Blue </span>"
End Sub
Not only will this allow you to copy the contents of the div but you can have several different colors of text in the div and you can also edit the contents of the div and the edited version will be copied.
I'm aware there are many solutions for a click to copy feature, one of the most popular seems to be clipboard.js but I have not found a solution that allows you to copy only elements that have a specific class.
For example:
<div class="wrapper">
<div class="copytext">I want to copy this text</div>
<div class="nocopytext">I don't want to copy this text</div>
<div class="copytext">I also want to copy this text<div>
</div>
<button>Copy only classes with copytext</button>
How can I create my script to select all classes "copytext" and copy it to my clipboard but leave out anything else?
Use the document.getElementsByClassName():
<div class="wrapper">
<div class="copytext">I want to copy this text</div>
<div class="nocopytext">I don't want to copy this text</div>
<div class="copytext">I also want to copy this text<div>
</div>
<button onclick="copyText()">Copy only classes with copytext</button>
<div id="output"></div>
<script>
function copyText() {
var outputText = "";
var targets = document.getElementsByClassName('copytext');
for( var i = 0; i < targets.length; i++ ) {
outputText += targets[i].innerText;
}
var output = document.getElementById('output');
output.innerText = outputText;
var range = document.createRange();
range.selectNodeContents(output);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
output.style.display = 'none';
}
</script>
this is my code :
<div id="box" style="border:1px solid red;height:100px;width:150px;position:relative;background:#eee">
<div id="head" style="background:black">drag me</div>
<div id="content" contenteditable=true style="border-bottom:1px solid red;height:70px;margin-bottom:5px;"> edit it </div>
<input id="ok" type="button" value="ok"/>
<input id="cancel" type="button" value="cancel"/>
</div>
and the script is :
$('#content').focus()
the demo is here :http://jsfiddle.net/VRxZe/8/
how can i select 'edit it'
thanks
If you want to select text inside some element, you can use Ranges. The code below should work with Firefox and Opera and Chrome. Another story is IE. For this browser you will have to create new TextRange object and use its methods moveToElementText and select.
var content = document.getElementById('content');
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(content);
selection.removeAllRanges();
selection.addRange(range);
content.focus()
The code below is for IE
var content = document.getElementById('content');
var rng = document.body.createTextRange();
rng.moveToElementText(content);
rng.select();
content.focus()
Hope this helps.
Well, you are almost there :)
$('#box').focus(function()
{
$('#content', this).select();
});