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
Related
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>
I have a web page with a simple image OCR text.
I would like to get the text of this image with Tesseract.js. It's working fine except at first launch. The following message is displayed and nothing more:
initializing api (100%)
After reloading it's working fine. I don't know why it only work after reloading the page. If I clear the cache the issue reappears. I use Firefox.
My HTML/Javascript file
<html>
<head>
<title>QRScanner Library Test</title>
<script src="tesseract.js"></script>
</head>
<body>
<input type="button" id="go_button" value="Run" />
<div id="ocr_results"> </div>
<div id="ocr_status"> </div>
<img id="img" src="ocr.gif"/>
<script>
document.getElementById("go_button")
.addEventListener("click", function(e) {
var url = document.getElementById("img").src;
runOCR(url);
});
function runOCR(url) {
Tesseract.recognize(url)
.then(function(result) {
document.getElementById("ocr_results")
.innerText = result.text;
}).progress(function(result) {
document.getElementById("ocr_status")
.innerText = result["status"] + " (" +
(result["progress"] * 100) + "%)";
});
}
</script>
</body>
</html>
I have downloaded in the same folder all js files: tesseract.js, worker.js, index.js and language package eng.traineddata.gz
I am new to this UWP, so bear with me please. I modified the code in the following MS GitHub: Link to create a Windows Phone App that can 'watch' BTLE advertisements.
But it is not able to read it any advertisements. My phone does support BTLE, I am able to see the devices in Windows BT Settings so the device is advertising it too. Please help me find where I am wrong and why.
Here is my code for JS:
var watcher = new Windows.Devices.Bluetooth.Advertisement.BluetoothLEAdvertisementWatcher();
//watcher.signalStrengthFilter.inRangeThresholdInDBm = -70;
//watcher.signalStrengthFilter.outOfRangeThresholdInDBm = -75;
//watcher.signalStrengthFilter.outOfRangeTimeout = 2000;
$(document).ready(function () {
console.log("HERE: ready");
watcher.onreceived = onAdvertisementReceived;
$("button#start").unbind('click').on('click', function (e) {
console.log('CLICKED >');
e.preventDefault();
watcher.start();
});
$("button#stop").unbind('click').on('click', function (e) {
console.log('CLICKED <');
e.preventDefault();
watcher.stop();
});
});
function onAdvertisementReceived(eventArgs) {
console.log("HERE: function watcher", eventArgs);
var timestamp = eventArgs.timestamp;
var advertisementType = eventArgs.advertisementType;
var rssi = eventArgs.rawSignalStrengthInDBm;
var localName = eventArgs.advertisement.localName;
$("div#list > ul").append("<li> Timestamp: <strong>" + timestamp.getHours() + ":" + timestamp.getMinutes() +
":" + timestamp.getSeconds() + "</strong> Type:" + advertisementType.toString() + " RSSI:" + rssi.toString() + " Name:" +
localName + "</li>");
}
Here is my HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bluetooth LE Smart Watch</title>
<link href="css/default.css" rel="stylesheet" />
<link href="css/materialize.min.css" rel="stylesheet" />
</head>
<body class="container">
<div class="row">
<h4>List of BTLE Devices</h4>
<button class="btn" id="start">Start Watcher</button><button class="btn" id="stop">Stop Watcher</button>
<div id="list" class="col m12 s12">
<ul>
</ul>
</div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
But it is not able to read it any advertisements. My phone does support BTLE, I am able to see the devices in Windows BT Settings so the device is advertising it too. Please help me find where I am wrong and why.
To get the BTLE work, you need to enable the BlueTooth capability in package.appxmannifest. You can achieve this through:
In VS2015->Double click package.appxmannifest->Capabilities->Check Bluetooth capability.
Or You can open package.appxmannifest in code view and add <DeviceCapability Name="bluetooth" /> in Capabilities tag:
<Capabilities>
<Capability Name="internetClient" />
<DeviceCapability Name="bluetooth" />
</Capabilities>
I am trying to reproduce some thing that works on codecademy: https://www.codecademy.com/en/courses/web-beginner-en-v6phg/2/5?curriculum_id=50a3fad8c7a770b5fd0007a1
However, when I copied down the html, css, and js files and ran it with google chrome, nothing was working. I noticed the missing <script> link to Jquery and added it, and fixed the 'add' function; however the 'remove part' never worked.
Ps. I made sure the script is correctly linked by adding an alert, which fired.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Checklist</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
and jquery (js) file:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document.body).on('click', '.item', function(event) {
$(this).remove();
});
});
I just found out the issue to be using old version of jQuery. You are using 1.4.2, which doesn't have the .on() function.
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<!-------------------------------------------------------^^^^^
Solution: Use the latest version of jQuery 1.x, which is 1.12.
From the manual:
I would really suggest you to check the console first before posting something here.
If you sticky with old library then use .live() instead of .on(). Hope this will work for you.
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(".item").live('click', function() {
$(this).remove();
});
});
Demo: https://jsfiddle.net/8s19ehh8/5/
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!