The textarea element is then temporarily added to the DOM body using the appendChild function and the Textarea is focused and selected so that its contents can be copied.Ī try.catch statement wraps the next section of code where the document.execCommand function is called to execute the ‘copy’ command. The Textarea style is updated to have a ‘fixed’ position with the top and left coordinates set to large minus values such that the Textarea will appear offscreen and therefore should not be visible to the user. Note that document.execCommand is a deprecated function, but it remains a well-supported feature across a wide range of browsers at the time of writing and is a good fallback position. Copy commandĪs a fallback position, if neither the Clipboard API nor Clipboard Data are supported, the code will fall back to using document.execCommand to execute the ‘copy’ command, copying text from an off-screen Textarea. You may still find that users on older, unsupported operating systems such as Windows XP and Windows 7 may still be running Internet Explorer. Note that Internet Explorer was retired on 15th June 2022 and can no longer be accessed directly on modern Windows operating systems that have recent Windows Updates installed. The setData function is synchronous and will therefore return after the contents of the clipboard have been updated. ![]() The setData function is used to write text data to the clipboard by specifying the type of data as ‘Text’. If the Clipboard API is not available, the code tests if Clipboard Data can be accessed instead.ĬlipboardData can only be accessed directly on the window object by Internet Explorer. Note that it is also possible to wait for the result of the writeText function asynchronously via the await keyword. The promise will be rejected if the specified text cannot be written to the clipboard for any reason. The writeText function is asynchronous and returns a Promise object once the contents of the clipboard have been updated. ![]() The writeText function is used to write the specified text to the clipboard. Note that the Clipboard API is only available over HTTPS, non-secure pages will need to fall back to one of the alternative methods covered in the sub-sections that follow. At the time of writing, CanIUse indicates that 94.18% of users can use the Clipboard API features. This includes Chrome and Firefox since 2018, as well as Edge and Safari since 2020. The Clipboard API is supported by most modern browsers. The copyTextToClipboard function first of all checks if the browser that is running the code has support for the Clipboard API by testing if navigator.clipboard is ‘ truthy‘. You may choose to remove these or replace them with console.log function calls instead. Note that depending on your scenario, the alert function calls may not be what you want. Let’s break down the above code into a manageable set of chunks, tackling each of the three main conditional sections within the function in the following sub-sections. It’s hard to make guarantees, but the code should offer a very good level of support across as many browser versions as possible. The code below documents a copyTextToClipboard JavaScript function that should work in practically every browser that is still in use today. We’re going to start with some code that aims to support as many browsers as possible. Let’s dive straight in and see how we can implement the copy-to-clipboard functionality within a web application. I’ll also demonstrate alternative code that uses newer JavaScript features and therefore will only work in recent versions of modern browsers. In this post, I will show you how to copy text to the clipboard using JavaScript in a way that is compatible with almost any browser in use today. ![]() Ideally, you’ll write your code in such a way that it will work with as many browser versions as possible to maximise compatibility. This functionality is often needed so that users can copy some form of text, for example, a quotation or a block of code, without needing to manually select and copy the text manually.Īs with any web application, you’ll need to consider what the browser support is for the APIs that you are working with. Providing users of a web application with a way of copying data to the system clipboard is a common requirement that can be achieved by employing some client-side JavaScript.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |