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>

Check when an element has been selected/tabbed onto

I have an HTML page where I have a few divs with contenteditable="true". I also set the tabindex sequentially so when the user hits tab he or she will go through all of the editable divs. However, right now I have "Insert notes here" written inside each of the divs (see below).
<div contenteditable="true" tabindex='1'>Insert notes here<div>
<div contenteditable="true" tabindex='2'>Insert notes here<div>
<div contenteditable="true" tabindex='3'>Insert notes here<div>
I'm trying to get rid of the "Insert notes here" text when the user tabs to the div. Right now, I'm able to get rid of the text if they click on it with the following jQuery:
function selectText(containerid) {
if(document.getElementById(containerid).innerHTML == "Insert notes here") {
document.getElementById(containerid).innerHTML = "";
}
}
Is there a way to achieve the same effect but also when the user uses tab?

sounds like you are looking for the onfocus event
http://www.w3schools.com/jsref/event_onfocus.asp
In jquery:
$("#fieldId").focus(function() {
//your code here
});

Try this working snippet
$(document).on('keyup, focus', '.editor', function(e) {
this.innerHTML = "";
//detect 'tab' key
if (e.keyCode == 9) {
//add tab
this.innerHTML = "";
//prevent focusing on next element
e.preventDefault()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="editor" tabindex='1'>1
</div>
<div contenteditable="true" class="editor" tabindex='2'>2
</div>
<div contenteditable="true" class="editor" tabindex='3'>3
</div>

How to get Selected Text in Textbox

i m using a hyperlink here and on click event of the hyperlink i want to copy the selected text (which i have selected using the mouse pointer or highlighted text) inside the text box using the java script i want only selected text in the text box which i select or highlight from mouse pointer.my java script is working but it copy the full text of div
<li>Candidate Name </li>
<script type="text/javascript">
function Edit() {
alert("hiii");
document.getElementById('<%=txtbox.ClientID%>').value = document.getElementById('<%=divtext.ClientID%>').innerHTML;
return true;
}
</script>
<div>
<asp:TextBox ID="txtbox" runat="server"></asp:TextBox>
</div>
<div id="divtext" runat="server">
TCS Infosys Wipro HP HCL Microsoft Facebook Facebook Facebook
</div>

Try this
<!DOCTYPE html>
<html>
<script type="text/javascript">
function getSelectionText(divID) {
var selectedText = "";
if (window.getSelection) {
var sel = window.getSelection();
var div = document.getElementById(divID);
if (sel.rangeCount) {
// Get the selected range
var range = sel.getRangeAt(0);
// Check that the selection is wholly contained within the div text
if (range.commonAncestorContainer == div.firstChild) {
var selectedText = range.toString();
}
}
}
return selectedText;
}
function Edit() {
var selectedText = getSelectionText("divtext")
document.getElementById("txtbox").value = selectedText;
return true;
}
</script>
<body>
<li>Candidate Name </li>
<div>
<input type="text" ID="txtbox" />
</div>
<div id="divtext">
TCS Infosys Wipro HP HCL Microsoft Facebook Facebook Facebook
</div>
</body>

How can I detect when a text area loses focus and keep it from losing focus when a particular element is clicked?

I have a text area #ta with a list #ac-list underneath that's used for auto complete:
<div id='container'>
<textarea id="ta" name="god" rows="20"></textarea>
<ul id='ac-list' style='visibility:hidden'></ul>
</div>
When the text area loses focus, I'd like to hide #ac-list. So I call jquery's blur on the text area:
$('#textarea').blur(function () {
$('#ac-list').css('visibility', 'hidden');
})
This works, but I'd like to add the constraint that the text area shouldn't lose focus when the user clicks on #ac-list. How can I go about this?

Is this what you need? This is just a workaround. The time taken for blur on textarea and to focus on the li item varies to different computers.
HTML:
<div id='container'>
<textarea id="ta" name="god" rows="20"></textarea>
<ul id='ac-list'>
<li>dsfd</li>
</ul>
</div>
JavaScript:
var textAreaBlur = null;
$('textarea').blur(function () {
textAreaBlur = new Date();
});
var clickTimes = 0;
$("#ac-list > li").click(
function() {
if((new Date() - textAreaBlur) < 200) {
$("#ta").focus();
$(this).text("dsfd" + ++clickTimes);
}
}
);

how to Select All words when a div focus using jquery

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();
});