Copy text value to clipboard using jQuery

Simple sample of using jQuery to copy value to clipboard

I recently needed to copy some value from the web UI to clients clipboard. Since this is not something you often need to use, I googled a little bit and found that this is easy to do with document.execCommand. Apparently a lot of WYSIWYG editors are using this to execute cut, copy, paste, undo, redo...

The thing is that this command executes on the selected value and I needed to push a built text value from code. For this I made a small trick.

var $temp = $("<input>");
$("body").append($temp);
$temp.val("Some text value").select();
document.execCommand("copy");
$temp.remove();
    

With the code snippet above I create a text input, push the value in it, select it and run document.execCommand("copy"). This code works fine but it is only a core functionality.

End user does not actually see what happens after a click for copying value, so some notification needs to be introduced. Despite there are a lot of plugins out there, simple notification can be easily done with just few lines of jQuery code.

function CopyToClipboard(value, showNotification, notificationText) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val(value).select();
document.execCommand("copy");
$temp.remove();
if (typeof showNotification === 'undefined') {
showNotification = true;
}
if (typeof notificationText === 'undefined') {
notificationText = "Copied to clipboard";
}
var notificationTag = $("div.copy-notification");
if (showNotification && notificationTag.length == 0) {
notificationTag = $("<div/>", { "class": "copy-notification", text: notificationText });
                $("body").append(notificationTag);

                notificationTag.fadeIn("slow", function () {
                    setTimeout(function () {
                        notificationTag.fadeOut("slow", function () {
                            notificationTag.remove();
                        });
                    }, 1000);
                });
            }
        }
    

Now the core functionality is nicely wrapped along with notification with function and it expects 3 parameters to make it extendible out of the box for better reusing on the pages.

Now just to add some nice CSS for notification and we can run this code to see the results

        .copy-notification {
            color: #ffffff;
            background-color: rgba(0,0,0,0.8);
            padding: 20px;
            border-radius: 30px;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 150px;
            margin-top: -30px;
            margin-left: -85px;
            display: none;
            text-align:center;
        }
    

The whole code will look like this:

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article