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.
Related
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 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>
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.
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>
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);
});