Develop Reference

Place small "Copied" confirmation in the div that is copied by click

I have a wordpress site with a DIV that I copy its content via a link using a simple javascript code. I need a message to replace the copied content saying "Copied" in the div AFTER its copied.
Very challenging. Need help to do this.
<div class="btcTXT" id="btc">bc1q978cape6n3sez2ahp59s7jr59j70nqq2x3tt8c</div>
<div onclick="CopyToClipboard('btc');return false;" class="cpy"><i class="far fa-copy"></i> </div>
<script>
function CopyToClipboard(id)
{
var r = document.createRange();
r.selectNode(document.getElementById(id));
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
}
</script>

You're almost there...
function CopyToClipboard(id) {
let item = document.getElementById(id);
var r = document.createRange();
r.selectNode(item);
window.getSelection().removeAllRanges();
window.getSelection().addRange(r);
document.execCommand('copy');
window.getSelection().removeAllRanges();
item.innerText = 'Copied';
}

Content-editable <span> tag unselects when the mouse button is released

I'm trying to use a content-editable span tag as a variable-width inline text input box. Everything is working fine, except I can't get it to select the whole text when I focus on the box. Tabbing to the editable span works fine, but when I click it, the mouse-up event seems to unselect the selection I just made. I'm using google chrome latest on Ubuntu.
http://jsfiddle.net/6b3tP/
Here's the HTML:
<div>
Inline editable <span contenteditable="true">spans</span> are hard to select.
</div>
And here's the JS:
$('span').focus(function() {
var text_node = this.firstChild;
var text = $(this).text();
var range = document.createRange();
range.setStart(text_node, 0);
range.setEnd(text_node, text.length);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});

I'd suggest delaying doing the selecting using window.setTimeout() to allow the dust to settle before doing anything. You can also simplify the code a little.
Demo: http://jsfiddle.net/6b3tP/1/
Code:
$('span').focus(function() {
var span = this;
window.setTimeout(function() {
var range = document.createRange();
range.selectNodeContents(span);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}, 1);
});

Dragging a div select whole text

imagine i have a div
<div id="blah">
spotify:track:something
spotify:track:something
spotify:track:something
spotify:track:something
</div>
With close to 100+ of spotify:track stuff and I want to drag whole list to Spotify program to create a new playlist, but first I would have to select all the text.
Is it possible to make that starting to drag div automatically would select whole text.
For example: http://codepen.io/anon/pen/Hwbdy
It actually doesn't if it's a div or text area as long as a user can simple click and drag without selecting the text, thanks

if you want to select texts by javascript try this:
function select(){
var div = document.getElementById('blah'),
sel, range;
if(window.getSelection){
range = document.createRange();
range.selectNode(div)
sel = window.getSelection();
sel.addRange(range);
}else{
range = document.body.createTextRange();
range.moveToElementText(div);
range.select();
}
}
demo / jsfiddle

Maybe use jQuery? :
$("#yourID").focus(function() {
var $this = $(this);
$this.select();
// Work around Chrome's little problem
$this.mouseup(function() {
// Prevent further mouseup intervention
$this.unbind("mouseup");
return false;
});
});

Hidden text that can be dragged from the browser?

How can you create an html element that when dragged from the browser into a text editor, hidden text on or in the dragged element will be pasted into the editor?
My first thought was to use the href attribute on the anchor tag:
Drag me into a text editor!
This works great in chrome, but firefox and safari remove spaces from the href value which renders the copied message unusable.
Any ideas?

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

For versions of IE below 10 which don't support the dataTransfer method, I've discovered another somewhat hacky way to make this work.
Basically you make text invisible with css then use js to select it in the background on hover.
HTML
<div id="drag_area" draggable="true">
<div id="text">
hidden text
</div>
</div>​
CSS
#text { filter:alpha(opacity=0); opacity:0;
overflow:hidden; z-index:100000; width:180px; height:50px }
​
JS
function selectText(elementID) {
var text = document.getElementById(elementID);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
$('#drag_area').hover(function(){
selectText('text');
});
Here it is combined with Anson's solution and a little feature detection:
http://jsfiddle.net/zaqx/PB6XL/
(works in IE8, IE9 and all modern browsers)
EDIT: Updated Fiddle in the comments below.

How to select all text in contenteditable div?

Before this is flagged as a duplicate, I want you to realize that no one has actually provided a good answer for this specific question. In select all text in contenteditable div when it focus/click, the accepted answer and Tim Down's answer are both not helpful, as they only work when the element is already focused. In my case, I want all the text in the contenteditable div to be selected after the click of a button, even if the div was not focused beforehand.
How could I do this?

I used some code from this thread to come up with my answer. It's 100% jQuery as you asked for as well. Hope you like it :)
jQuery.fn.selectText = function(){
var doc = document;
var element = this[0];
console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$("button").click(function() {
$("#editable").selectText();
});​
jsfiddle link.

For example in next scenario if user set focus into editable div (with mouse, keyboard or by clicking a button) then content of editable div is selected.
<div id="editable" style=" border:solid 1px #D31444" contenteditable="true"
onfocus="document.execCommand('selectAll', false, null);">
12 some text...
</div>
<button onclick="document.getElementById('editable').focus();" >Click me</button>
On JSFiddle: http://jsfiddle.net/QKUZz/

Great function.
I've adapted it to enable full selection of text across any number of editable divs via a class, whether clicked directly, or tabbed to:
$.fn.selectText = function(){
var doc = document;
var element = this[0];
//console.log(this, element);
if (doc.body.createTextRange) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(element);
selection.removeAllRanges();
selection.addRange(range);
}
};
$(".editable").on("focus", function () {
$(this).selectText();
});
$(".editable").on("click", function () {
$(this).selectText();
});
$('.editable').mouseup(function(e){
e.stopPropagation();
e.preventDefault();
// maximize browser compatability
e.returnValue = false;
e.cancelBubble = true;
return false;
});
HTML:
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div>
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div>
FIDDLE:
http://jsfiddle.net/tw9jwjbv/

Chrome does select everything, so I just added RAF to work around it:
requestAnimationFrame(() => document.execCommand('selectAll'));
Demo: http://jsfiddle.net/0aqptw8m/

<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>
Judging by this answer provided in the link, cant you use the code on click within your button.
What im saying is even say in the div onfocus="document.execCommand('selectAll',false,null)"
Then use jQuery to trigger focus $('#test').focus();