<input value="hello" id="p1" readonly style="width: 100%;">
<br><p>
<div class="btn-main">Copy!</div>
When visitors press the class "btn-main" I want the input value to be copied to their clipboard.
function copyToClipboard(text) {
window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
<button id="demo-btn" onclick="copyToClipboard(document.getElementById('demo-btn').innerHTML)">Copy!</button>
You may use jQuery clone() Method
Description :- The clone() method makes a copy of selected elements, including child nodes, text and attributes.
$(document).ready(function(){
$("button").click(function(){
$("p").clone().appendTo("body");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
</body>
</html>
It can be done like this as well,
document.getElementById("copyBtn").addEventListener("click", function() {
target = document.getElementById("p1");
target.focus()
target.setSelectionRange(0, target.value.length);
document.execCommand('copy');
});
<input value="hello" id="p1" style="width: 100%;">
<br>
<p>
<button id="copyBtn" class="btn-main">Copy!</button>
<textarea></textarea>
<p> Press Ctrl + V in the text area to see the copied text</p>
Related
I want that when i press the button it will copy the "hello"
but i get this error:
copyText.select is not a function
how to fix it?
<html>
<head>
</head>
<body>
<span id="aaa">hello</span>
<button onclick="copy('#aaa')">copy</button>
<script>
function copy(text)
{
var copyText = text;
copyText.select();
document.execCommand("copy");
console.log(document.getElementById('text'));
}
</script>
</body>
You cannot select text of a span using select function. You have to create a temporary input with the value of the text of the span. select the value in the input using select() and copy the text and then delete the input
function copy(text)
{
var copyText = document.getElementById(text).textContent;
document.querySelector('#aux').innerHTML+=('<input id="a" value='+copyText+'>')
document.getElementById("a").select();
document.execCommand("copy");
document.querySelector('#aux').innerHTML="";
//console.log(document.getElementById('text'));
}
<html>
<head>
</head>
<body>
<span id="aaa">hello</span>
<button onclick="copy('aaa')">copy</button>
<span id="aux"></span>
</body>
</html>
If I use insertAfter() id block then textbox is not clickable!
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#id").click(function() {
$("#id").insertAfter($(".logo"));
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var clickedOnce = false;
$(document).ready(function(){
$("#id").click(function(){
if(clickedOnce === false) {
$("#id").insertAfter($(".logo"));
clickedOnce = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text" />
</form>
</div>
</body>
This is because you when you clicked the second or more times, it is still inserting #id after .logo and it will make the textbox buggy.
You need to check if the button has been clicked once.
It is Working Check.
<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var moved = false;
$("#id").click(function() {
if(!moved) {
$("#id").insertAfter($(".logo"));
moved = true;
}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<p class="logo">This is another paragraph.</p>
<button>Clone all p elements, and append them to the body element</button>
<div id="id">
<form>
<input type="text"/>
</form>
</div>
</body>
I have used CKEditor a year now and everything has worked as it should.
Now I need to change the text in the textarea using javascript.
I have created an example that illustrates my problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function othertext() {
document.getElementById('button').value = 'xxx';
document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
CKEDITOR.replace('editor');
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="othertext();" value="NewText" />
<br>
<textarea id=noteditor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
When I click the button, the value of the button changes, the same with the first textarea (id=noteditor).
But textarea (id=editor) is not affected.
Why?
In debugger, when the line "CKEDITOR.replace('editor1');" in function othertext is executed I get <exception>:TypeError.
What am I doing wrong?
I found a solution to my problem!
By chance I found the answer to my question here: http://sdk.ckeditor.com/samples/api.html under "Using CKEditor API".
I have rewritten my first code here below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function SetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor_Area1;
var value = document.getElementById('HTMLArea' ).value;
// Set editor content (replace current content).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="SetContents();" value="Set text" />
<br>
<textarea id=HTMLArea>
<h1>
Hello other world!
</h1>
<p>
I'm an other instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor_Area1>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor_Area1');
</script>
</body>
</html>
When clicking on the button, the content of the editor-area is replaced by the html from the textarea "HTMLArea".
Anyone know how to copy the text of one div into another?
My situation is that I want to make a textbox that can have information typed into it and then show up in a div.
this is my code:
$("#title").text() = $("#t").text();
"#t" is my textbox and "#title" is the div.
The answer can be in javascript or jquery I don't mind. However I'd prefer jquery.
You can easily done it like this by handling 'onkeyup' event of the input text.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<input type="text" id="txt1"/>
</div>
<div>
<p id="typed-result"></p>
</div>
<script>
$(document).ready(function(){
$('#txt1').on('keyup',function(){
var result = $(this).val();
$('#typed-result').text(result);
});
});
</script>
</body>
</html>
You could try the following:
$("#title").text($("#t").val());
$(function(){
$("#copyBtn").on("click", function(){
$("#first").text($("#txtBox").val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">This is the div.</div>
<input type="text" placeholder="enter value" id="txtBox"/>
<input type="button" value="Copy text box value to div" id="copyBtn"/>
You can do this with
$('#getDiv').text($(this).val());
Try with this working example , just type something in textarea
$(function(){
$('#getText').on('keyup', function() {
$('#getDiv').text($(this).val());
})
});
<textarea id="getText"></textarea>
<div id="getDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You can use the keyup JavaScript event, Something like this -
HTML -
<body>
<input type='text' id='one'>
<div id='two'></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
jQuery -
$(document).ready(function() {
$('#one').on('keyup', function() {
$('#two').text($(this).val());
})
})
You can use this
$("#t").keyup(function(){
$("#title").text($("#t").value());
}
$('#txtArea').keyup(function(event) {
event.preventDefault();
$('.txt-block').text($("#txtArea").val());
// #txtArea is ur textarea box where you type text.
// .txt-block is your div where textarea Text shows.
});
I'm trying to use zeroclipboard 2.2.0.
<!DOCTYPE html>
<html>
<head lang="en">
<script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
</head>
<body>
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="first">Copy from first div</button>
<button data-clipboard-target="second">Copy from second div</button>
</body>
</html>
But it is not working for me. Could you point at mistake? I cannot find proper examples because they are quite oudated.
If you can suggest any alternative to zeroclipboard I will consider it.
This works for me:
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button id="button1" data-clipboard-target="first">Copy from first div</button>
<button id="button2" data-clipboard-target="second">Copy from second div</button>
<script>
var zeroClipboard = new ZeroClipboard();
zeroClipboard.clip(document.querySelector("#button1"));
zeroClipboard.clip(document.querySelector("#button2"));
zeroClipboard.on('copy', function(event) {
});
</script>
I didnt use that, if you want, here a code without zeroclipboard 2.2.0.
HTML
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button onclick="copyToClipboard('#first')">Copy from first div</button>
<button onclick="copyToClipboard('#second')">Copy from second div</button>
JS:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}