I want to be able to show one piece of text Copy Code but have it copy the code #PromoCode01
This is what I have so far;
<p id="code" class="sub">Copy Code</p>
<div class="codecopytext">
<p id="code">#PromoCode01</p>
<style>.codecopytext { display: none;</style>
</div>
<script>
function myFunction() {
var copyText = document.getElementById("code");
copyText.select();
document.execCommand("copy");
alert("Copied the promo code:" + copyText.value);
}
</script>
I know this can be done with URLs and showing different text vs what the URL actually is. I'm just wondering why this won't work?
Thanks in advance.
Related
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 have buttons with some text in the button attribute and what I want is when I click to the button it copy to the clipboard
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
console.log(copyText);
copyText.text().select();
document.execCommand("copy");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
When I click it return this :
Uncaught TypeError: copyText.select is not a function
When you want to copy text into the clipboard, you need to select text on a textarea or an input.
The data attribute is an attribute of the tag HTML, it's not selectable.
You can make this if you put the text into a textarea, select it and remove the tag after copy.
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var textarea = document.createElement("textarea");
textarea.textContent = copyText;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
This example on w3schools shows you you need to use an text field in order to use .select() and then have it copy
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
}
</script>
</body>
</html>
This is how you could implement it in your code:
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var element = document.createElement("input");
element.type = 'text';
element.value = copyText;
element.style.position = "fixed"; // Prevent MS edge scrolling.
document.body.append(element);
element.select();
document.execCommand("copy");
document.body.removeChild(element);
})
Apparently you can only copy a visible and also an input element. Try something like:
$('.copyboard').on('click', function(e) {
e.preventDefault();
var copyText = $(this).attr('data-text');
var el = $('<input style="position: absolute; bottom: -120%" type="text" value="'+copyText+'"/>').appendTo('body');
el[0].select();
document.execCommand("copy");
el.remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-text="Hello World 1" class="copyboard">Copy</button></div>
<button data-text="Hello World 2" class="copyboard">Copy</button></div>
<button data-text="Hello World 3" class="copyboard">Copy</button></div>
According to the docs This event is limited to <input type="text"> fields and <textarea> boxes. See jquery - select()
Similarly, The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field MDN - HTMLInputElement - select
As a workaround, you can create a temporary, invisible and un-editable input or textarea on each button click, copy the necessary text to the clipboard, and then remove the input again.
See this article.
I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
I found some solutions, but I still do not know how to make the text automatically appear in textarea after pressing the button.
append the copied value to value of textarea everytime you run copyToClipboard
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
textarea.value += document.getElementById(elementId).innerHTML
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
ummm...You are REALLY over-complicating stuff...
Just use the following JS:
let textarea = document.getElementById("select-this");
textarea.focus();
function changeTextarea(elementId) {
textarea.innerHTML = document.body.querySelector(elementId).innerHTML;
}
and edit the HTML of the buttons as follows:
<button onclick="changeTextarea('#p1')">Copy P1</button>
<button onclick="changeTextarea('#p2')">Copy P2</button>
<button onclick="changeTextarea('#p3')">Copy P3</button>
You don't need to copy and then paste the values of the paragraphs to the <textarea>. Just change it using the innerHTML property...
I've a simple solution for that, just using the part of the code you have.
function copyToClipboard(elementId) {
var text = document.getElementById(elementId).innerHTML;
let textarea = document.getElementById("select-this");
textarea.innerHTML = text;
textarea.focus();
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br><br>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.
I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text
I'm rather new to programming, but let's keep going. My goal is to create a button that when pressed it will print out text. If you press a second time, it will print out text below the original snippet and so on. Basically, if you keep clicking the button you'll get text repeated a number of times below each other. Currently I've achieved a button that when pressed it prints out text. Press it again and it does nothing. Here's the code I used:
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
I'm sure I've done something wrong. Thanks a million.
If you're convinced that it should work, try it. It WILL print out text, but then when you do it a second time, it does nothing.
The below example is self explanatory
DEMO http://jsfiddle.net/YzqML/
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
Another example with checkbox and label
DEMO http://jsfiddle.net/YzqML/1/
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>
You can create new elements and append them to the DOM, like this:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Each time you call the display function, the string you give it is added to a new paragraph (p element) on the page, which is added to the bottom of the body.
I note a jquery tag in your question , so you can do this :
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
DEMO :
http://jsfiddle.net/abdennour/GZu38/1/
Copy paste this code in an html file and run in a browser. If you could include Jquery, then more simpler the code would be.
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>