Home > Tips & Tricks > Copy to Clipboard with JavaScript – (also for hidden element)

Copy to Clipboard with JavaScript – (also for hidden element)

In this trick, I’ll show you how you can copy to a clipboard with javascript.

We used the select() function for the selection of input value and then execCommand() function for “copy” command with javascript. It will print your copied text in the console terminal.

Note: The above function only work with visible input element. If you have hide the element with CSS property like visibility: hidden; OR display: none; then it will not work for that element.

So, for that element, you have to use another tricky way to make a copy to the clipboard function in javascript. Let’s see the code.

It will copy the data from the hidden element.

Being Tricky 😉

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

2 thoughts on “Copy to Clipboard with JavaScript – (also for hidden element)”

Leave a Comment