Copy text to clipboard upon keypress
0
It is possible to use this library to bind copy to clipboard to a keyboard short-cut?
All the usage examples assume there's a button on the page and wait until the user presses that button. But I need to trigger it with the keyboard.
My attempts don't even trigger any callback. I've there's a trigger I need to issue manually, I can't find it:
jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jquery clipboard.js
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
add a comment |
0
It is possible to use this library to bind copy to clipboard to a keyboard short-cut?
All the usage examples assume there's a button on the page and wait until the user presses that button. But I need to trigger it with the keyboard.
My attempts don't even trigger any callback. I've there's a trigger I need to issue manually, I can't find it:
jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jquery clipboard.js
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
My actual code has$(document).on("keyup")instead of$("textarea").on("keyup"). Switching to"body"doesn't seem to change anything. The problem is that I don't know how to tellClipboardJSto trigger copy on keyboard event since it's clearly expecting a click.
– Álvaro González
Nov 23 '18 at 10:15
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only havenew ClipboardJS($placeholder[0])because the constructor requires an element but$placeholder[0]is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?
– Álvaro González
Nov 23 '18 at 10:21
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33
add a comment |
0
0
0
It is possible to use this library to bind copy to clipboard to a keyboard short-cut?
All the usage examples assume there's a button on the page and wait until the user presses that button. But I need to trigger it with the keyboard.
My attempts don't even trigger any callback. I've there's a trigger I need to issue manually, I can't find it:
jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jquery clipboard.js
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
It is possible to use this library to bind copy to clipboard to a keyboard short-cut?
All the usage examples assume there's a button on the page and wait until the user presses that button. But I need to trigger it with the keyboard.
My attempts don't even trigger any callback. I've there's a trigger I need to issue manually, I can't find it:
jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jQuery(function($){
var $placeholder = $("div:first");
var clipboard = new ClipboardJS($placeholder[0]);
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$placeholder.attr("data-clipboard-text", text);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
// And now what?
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<div></div>jquery clipboard.js
jquery clipboard.js
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
edited Nov 23 '18 at 10:09
Álvaro González
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
asked Nov 23 '18 at 10:03
Álvaro GonzálezÁlvaro González
107k30189279
107k30189279
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
My actual code has$(document).on("keyup")instead of$("textarea").on("keyup"). Switching to"body"doesn't seem to change anything. The problem is that I don't know how to tellClipboardJSto trigger copy on keyboard event since it's clearly expecting a click.
– Álvaro González
Nov 23 '18 at 10:15
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only havenew ClipboardJS($placeholder[0])because the constructor requires an element but$placeholder[0]is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?
– Álvaro González
Nov 23 '18 at 10:21
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33
add a comment |
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
My actual code has$(document).on("keyup")instead of$("textarea").on("keyup"). Switching to"body"doesn't seem to change anything. The problem is that I don't know how to tellClipboardJSto trigger copy on keyboard event since it's clearly expecting a click.
– Álvaro González
Nov 23 '18 at 10:15
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only havenew ClipboardJS($placeholder[0])because the constructor requires an element but$placeholder[0]is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?
– Álvaro González
Nov 23 '18 at 10:21
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
My actual code has
$(document).on("keyup") instead of $("textarea").on("keyup"). Switching to "body" doesn't seem to change anything. The problem is that I don't know how to tell ClipboardJS to trigger copy on keyboard event since it's clearly expecting a click.– Álvaro González
Nov 23 '18 at 10:15
My actual code has
$(document).on("keyup") instead of $("textarea").on("keyup"). Switching to "body" doesn't seem to change anything. The problem is that I don't know how to tell ClipboardJS to trigger copy on keyboard event since it's clearly expecting a click.– Álvaro González
Nov 23 '18 at 10:15
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only have
new ClipboardJS($placeholder[0]) because the constructor requires an element but $placeholder[0] is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?– Álvaro González
Nov 23 '18 at 10:21
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only have
new ClipboardJS($placeholder[0]) because the constructor requires an element but $placeholder[0] is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?– Álvaro González
Nov 23 '18 at 10:21
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33
add a comment |
1 Answer
1
active
oldest
votes
0
I think I found the point I was missing. I basically need to trigger the click event myself. I've replaced my <div> place-holder with something more obvious:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>This works in desktop browsers like Firefox, Chrome, Edge, IE11 (this browser asks the user for permission) and possibly many others.
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444494%2fcopy-text-to-clipboard-upon-keypress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
I think I found the point I was missing. I basically need to trigger the click event myself. I've replaced my <div> place-holder with something more obvious:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>This works in desktop browsers like Firefox, Chrome, Edge, IE11 (this browser asks the user for permission) and possibly many others.
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
add a comment |
0
I think I found the point I was missing. I basically need to trigger the click event myself. I've replaced my <div> place-holder with something more obvious:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>This works in desktop browsers like Firefox, Chrome, Edge, IE11 (this browser asks the user for permission) and possibly many others.
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
add a comment |
0
0
0
I think I found the point I was missing. I basically need to trigger the click event myself. I've replaced my <div> place-holder with something more obvious:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>This works in desktop browsers like Firefox, Chrome, Edge, IE11 (this browser asks the user for permission) and possibly many others.
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
I think I found the point I was missing. I basically need to trigger the click event myself. I've replaced my <div> place-holder with something more obvious:
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>This works in desktop browsers like Firefox, Chrome, Edge, IE11 (this browser asks the user for permission) and possibly many others.
jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>jQuery(function($){
var $dummyButton = $("button:first");
var clipboard = new ClipboardJS($dummyButton[0]);
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
$("textarea").on("keyup", function(event){
var text;
if (event.key === "s") {
text = "Test / " + Math.round(1000000 * Math.random());
console.log("Copying '%s' to clipboard...", text);
$dummyButton.attr("data-clipboard-text", text);
$dummyButton.trigger("click");
}
})
});textarea{
width: 100%;
color: red;
}
textarea:focus{
color: green;
}
button {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<textarea>Type "s" here to save some text to clipboard. Then use Ctrl+V to see if it worked.</textarea>
<button>Dummy button</button>answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
edited Nov 23 '18 at 11:03
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
answered Nov 23 '18 at 10:28
Álvaro GonzálezÁlvaro González
107k30189279
107k30189279
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53444494%2fcopy-text-to-clipboard-upon-keypress%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You'd basically haft to bind a keydown/keyup on body and listen to it with jQuery. Try body instead of textarea.
– Anuga
Nov 23 '18 at 10:12
My actual code has
$(document).on("keyup")instead of$("textarea").on("keyup"). Switching to"body"doesn't seem to change anything. The problem is that I don't know how to tellClipboardJSto trigger copy on keyboard event since it's clearly expecting a click.– Álvaro González
Nov 23 '18 at 10:15
Probably need to focus the body as well, since it's not in focus after entering.
– Anuga
Nov 23 '18 at 10:17
Sorry if I'm not explaining myself properly. Just look at the runnable snippet in the question. I only have
new ClipboardJS($placeholder[0])because the constructor requires an element but$placeholder[0]is completely irrelevant here. Can I just tell him: "user wants data, please do your stuff now"?– Álvaro González
Nov 23 '18 at 10:21
just stating body worked fine for me.
– Anuga
Nov 23 '18 at 10:33