I want to make clipboard js to work with one of my node.js ejs file, since the actual file is too large, I create this file in which I want to use clipboard js to copy the content of the textarea to clipboard.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<title>pilcit</title>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
alert(e);
});
clipboard.on('error', function(e) {
alert(e);
});
</script>
</head>
<body>
<textarea id="copy" class="form-control mt-5" name="content" rows="4">
content of text area that is to be copied
</textarea>
<button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="copy">Copy!</button>
</body>
</html>
I cannot make it work, where is the problem?
You are missing this
data-clipboard-action="copy" data-clipboard-target="#copy"
here the copy should be #copy because you are selecting it by id
var clipboard = new Clipboard('.copyButton');
clipboard.on('success', function(e) {
alert(e);
});
clipboard.on('error', function(e) {
alert(e);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script>
<textarea id="copy" class="form-control mt-5" name="content" rows="4">
content of text area that is to be copied
</textarea>
<button class="copyButton" id="copyButtonId" data-clipboard-action="copy" data-clipboard-target="#copy">Copy!</button>
You can use jQuery for achieve this, The execCommand() method executes the specified command for the selected part of an editable section.
jQuery
$("button").click(function(){
$("textarea").select();
document.execCommand('copy');
});
JavaScript
document.querySelector("button").onclick = function(){
document.querySelector("textarea").select();
document.execCommand('copy');
};
<textarea>Copy my this ya</textarea>
<br>
<button>Select</button>
Related
First I edited my Blogger Template HTML.
I added the following script in the footer-1 section:
<script type="text/javascript">
//<![CDATA[
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();
});
var copyTextareaBtnb = document.querySelector('.js-textareacopybtnb');
copyTextareaBtnb.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextareab');
copyTextarea.select();
});
//]]>
</script>
Next I added a blog with the following HTML:
<textarea class="js-copytextarea">text needed to copy</textarea>
<button class="js-textareacopybtn">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
<textarea class="js-copytextareab">text 2 needed to copy</textarea>
<button class="js-textareacopybtnb">
<img src="https://clipboardjs.com/assets/images/clippy.svg" width="13" alt="Copy to clipboard">
</button>
Then I clicked on the first and then second button, nothing is copied.
Place all your code in one place (<div>, for example, or HTML widget).
And for scripts in Blogger use this structure:
<script type="text/javascript">
//<![CDATA[
your js code here
//]]>
</script>
you need to include jQuery for JavaScript. put this code before <head/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="js-copytextarea" id="1" readonly="" style="font-family: courier;">TTTEXTTT</textarea><button class="js-textareacopybtn" data-id="1">CCCOPYYY</button>
<script>
$('.js-textareacopybtn').on('click', function(event) {
var copyTextarea = $(this).data('id');
$('#' + copyTextarea)[0].select();
document.execCommand('copy');
});
</script>
I am trying t load an image into div tag from a url which is obtained from a textbox.My current file is as follows..I don't know what else to be done
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
Using pure javascript you can load the image as follows. I am using the onChange event to detect whether url has been supplied to the textbox or not. On pressing Enter key, the image will be loaded in the div.
function addImage()
{
var url = document.getElementsByClassName("imageURL1")[0].value;
var image = new Image();
image.src = url;
document.getElementsByClassName("ImageContainer")[0].appendChild(image);
}
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1" onChange="addImage();">
<div class="ImageContainer">
image will appear here:
</div>
</body>
</html>
You can try something like this.
$(document).ready(function(){
$("#Submit").click(function(){
var image_url = $(".imageURL1").val();
$(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageURL1">
<button id="Submit">Submit</button>
<div class="ImageContainer">
</div>
Js fiddle example -> http://jsfiddle.net/0kvxpnmv/
$('<img src="'+image_url+'">').load(function() {
$(this).appendTo('.ImageContainer');
});
JS Fiddle
Use php
index.php file
<form action="GetURL.php" method="post">
<input type="text" name="url">
<input type="submit">
</form>
Now when they click submit it will take you to the new page
GetURL.php
$image_url = $_REQUEST['url'];
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<div class="ImageContainer">
<?php echo '<img src="{$image}"/>'; ?>
</div>
</body>
</html>
On this page you can see that in your imageContainer class you have the image url being posted with PHP
The best way to handle this from here would be to have the form on the same page as the image and have it post the url with ajax.
So you would type in the url to the textbox and when your done it refreshes the image url.
How about using a button to call a funtion that'll change the image src with url in the text box
HTML
<html lang="en">
<head>
</head>
<body>
<input type="text" class="imageURL1">
<button onclick="func()">Load image</button>
<div class="ImageContainer">
<img src="" id="imgContainer">
</div>
</body>
</html>
javascript
(function(){
var func = function(){
var url = $(".imageURL1").val()
$('#imgContainer').attr('src',url)
}
})();
Here's the jsFiddle with jQuery and without jQuery
Please see my code below, on the change event of the text input, it would create an jQuery img tag then add then use the URL from the input as the source and clear the contents of the output div. Once the image is loaded, it will replace the content of the output div.
$('.imageURL1').change(function() {
var $img = $('<img/>');
$img.attr('src', $(this).val());
$img.load(function() {
$('.ImageContainer').html(this);
});
});
This solution requires jQuery.
Working fiddle here.
I'm trying to use zeroclipboard 2.2.0.
This example copies div content to the Clipboard on button click.
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
How to modify copied text in order to get, for example, "some text [copied]" instead of just "some text" on paste?
You can use setText() function on your zeroClipboard, instead of just clipping the button. So you can create a variable where you get the text stored in your textfield and then modify it. This would be something like:
<html>
<head>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
</head>
<body>
<input id="textholder" value="some text" />
<button id="button1" data-clipboard-target="textholder">Copy from div to Clipboard</button>
<script>
var zeroClipboard = new ZeroClipboard();
var text = //select your textfield and add modifications to the text
zeroClipboard.setText(text);
zeroClipboard.clip(document.querySelector("#button1"));
</script>
</body>
</html>
Hope it helps =)
I want to copy some text to clipboard using javascript
I have downloaded latest version of zeroClipboard 2.2
I have followed this example from http://davidwalsh.name/clipboard
Here is my html page:
$(document).ready(function(){
ZeroClipboard.setMoviePath("ZeroClipboard.swf");
//create client
var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
alert('copied: ' + text);
});
//glue it to the button
clip.glue('copy');
});
<html>
<meta http-equiv="Content-Type"/>
<head>
<script src="ZeroClipboard.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.3.min.js" ></script>
</head>
<body>
<textarea name="box-content" id="box-content" rows="5" cols="70">
The David Walsh Blog is the best blog around! MooTools FTW!
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>
</body>
</html>
Thanls in advance.
The example you choose is a little bit strange with the setTimeout on the demo page. Can you try with this version ? (it comes from the official website)
The target element is set with the data-clipboard-target attribute.
<textarea id="fe_text" cols="50" rows="3">Copy me!</textarea>
<button id="d_clip_button" title="Click me to copy to clipboard." data-clipboard-target="fe_text">Copy To Clipboard...</button>
<script>
$(document).ready(function() {
var clip = new ZeroClipboard($("#d_clip_button"), {
moviePath: "ZeroClipboard.swf"
});
clip.on("ready", function() {
this.on("aftercopy", function(event) {
console.log("Copied text to clipboard: " + event.data["text/plain"]);
});
});
clip.on("error", function(event) {
console.error('error[name="' + event.name + '"]: ' + event.message);
ZeroClipboard.destroy();
});
});
</script>
Warning :
Zero Clipboard might not work from local disks due to the security restrictions placed by Adobe.
https://stackoverflow.com/a/9450359/4682796
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!