We Keep Coding

How to copy in clipboard only one DIV from multiple divs using javascript

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>

Click event on element directly

I have a trouble with click events on ios safari. When i click on the span nothing happens first time. But when i focus on span its selected then after click events working. Can somebody explain this weird event ? or any suggestion ?
Here is my javascript:
window.selectText = function() {
$('.banks .number').on('click', function(e) {
$(this).select();
var doc = document,
text = this,
range,
selection;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
});
}
And html snippet:
<div class="banks">
<div class="bank-title">Хүлээн авагчийн данс</div>
<div class="bank khaan">
<div class="spacer" id="test">
<div class="logo"></div>
<span class="number">5037639120</span>
<span class="name">Хаан банк</span>
</div>
</div>
<div class="bank khas">
<div class="spacer">
<div class="logo"></div>
<span class="number">5002086050</span>
<span class="name">Хас банк</span>
</div>
</div>
</div>
And my goal is when users click on span.number its must select the texts. But i don't understand why click event not works on first click and after focusing span its selected then other click events works.

$(document).ready(function () {
jQuery(".banks").click(function () {
jQuery(".number").click(function (e) {
var se = window.getSelection();
alert(se);
//your logic can apply here
exit();
});
});
});

Can you use document.execCommand('copy') on the contents of a div?

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>

Click to copy all elements of a specific class into the clipboard?

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>

Dynamically create textbox on click button, and change it's css properties for selected textbox

Thanks once again,for all great mind's.
My expectation is exactly what the they have in example site.
example site:
http://www.printvenue.com/customer-design/editor/rounded-corner-business-cards/3-0128-vc-psd
--->creating text box dynamically onclick in CANVAS area only.
--->text box input text's font,font size,color .. changed by getting id
var somename = document.getelementbyid("id of textbox -in this case id getting uniquely");
somename = here all function for changing color, font are follows
but,
my problem is to add text box dynamically onclick button,so how to assing id for
var somename = document.getelementbyid("id of textbox(dynamically created text box id)");
At the same time that text box should be movable any were in canvas.

You can create a new HTML element like this:
var textBox = document.createElement("textarea");
To add it to the parent use
document.getElementById([insert id of parent here]).appendChild(textBox);
This parent should be the div/html-element in which all the textareas are located.
Example in JSFiddle
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button onClick="addBox()">add textarea</button>
JS
addBox = function(){
var textBox = document.createElement("textarea");
document.getElementById("parent").appendChild(textBox);
}
Example in JSFiddle with JQuery
HTML
<div id='parent'>
<textarea>txt1</textarea>
<textarea>txt2</textarea>
<textarea>txt3</textarea>
</div>
<button>add textarea</button>
jQuery
$(function(){
$('button').on('click', function(){
var textBox = document.createElement("textarea");
$('#parent').append(textBox);
});
});

Here the link that you wanted :
JavaScript Version:
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
JavaScript
document.getElementById('inp').addEventListener('click', function () {
var textarea = document.createElement('textarea');
textarea.className="mytextbox";
document.getElementById('cont').appendChild(textarea);
});
Css
.mytextbox{
width:200px;height:200px;box-shadow:2px 1px 5px 1px #000;
}
jQuery Version :
HTML
<input id='inp' type='button' value='Click me'/>
<div id='cont'>
</div>
jQuery
$('input').click(function(){
var textarea = $('<textarea></textarea>');
textarea.css({'width':'200px','height':'200px','box-shadow':'1px 2px 5px 1px #000'});
$('#cont').append(textarea);
});