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>
Related
Problem
Hi, I have some code that when a button is clicked, all of the content in a contentEditable <p> tag will have a font-weight of 600 (bold).
What I'm wondering is how can I make it so when the button is pressed, rather than style all the content in the p tag to 600 font weight, only style the selected text. For example, if you only highlight the first two words of the p tag and press the button, only the first two words will have their font-weight changed.
Image example
In the example, when the button is pressed, only the first two words would have their font-weight changed.
Link to the fiddle containing code: https://jsfiddle.net/AidanYoung/9tg4oas5/
here is your solution.
function changeBold() {
const text = window.getSelection().toString();
var btn = document.createElement('span');
btn.innerHTML = text;
btn.style.fontWeight = 'bold';
document.execCommand('insertHTML', false, btn.outerHTML);
}
<p contenteditable="true" id="contenttxt">
Some text in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
You can use the span label and add ID
function changeBold() {
document.getElementById("strongC").style.fontWeight = "600";
}
<p contenteditable="true" id="contenttxt">
<span id="strongC">Some text</span>
in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>
I am trying to create a button that is set into a content editable. It does set the text I input to bold however, I only want it to set the highlighted text bold instead of the whole text. Any help would be appreciated.
function bold(){
const x = document.getElementById("text");
if(x.style.fontWeight == "bolder"){
x.style.fontWeight = "normal";
}else{
x.style.fontWeight = "bolder";
}
}
<button onclick="bold()"> B </button>
<div id="text" class="editor" contenteditable="true" draggable="true"></div>
Your problem will be solved when you update your code like below :
<button onclick="bold()"> B </button>
<div id="text" class="editor" contenteditable="true" draggable="true">Text Example</div>
<script>
function bold(){
if(document.execCommand("bold")){
document.execCommand("normal");
}else{
document.execCommand("bold");
}
}
</script>
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 have code that works perfect except the spacing. The whole point of this code is to create something that allow me to add text to a textarea, then copy it with the empty lines removed.
Example:
Inputted text =
Line 1
Line 2
Copied/outputted text =
Line1
Line2
I've tried line spacing in both text area and DIV and onclick OR
onchange ="this.value=this.value.replace(/\n\r/gi,'');">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.content:not(.focus)').keyup(function(){
var value = $(this).val();
var contentAttr = $(this).attr('name');
$('.'+contentAttr+'').html(value.replace(/\r?\n/g,'<br/>'));
})
});//]]>
</script>
<body>
<textarea name="mas" rows="15" class="content" ></textarea>
<div class="mas" >
<pre contenteditable="true" id="p1" >Text</pre>
</div>
<button onclick="this.value=this.value.replace(/[\n\r](?! \w)/gi,'');">Remove Spaces</button>
<button onclick="copyToClipboard('#p1')" >Copy</button></pre>
</body>
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>