Copy Text To Clipboard In Html Using Javascript - DEV Community

Trang chủ » Html Code To Copy Text » Copy Text To Clipboard In Html Using Javascript - DEV Community

Có thể bạn quan tâm

Forem Logo DEV Community Logo DEV Community Main Image

DEV Community

Follow

A space to discuss and keep up software development and manage your software career

Future Logo Future Main Image

Future

Follow

News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.

Open Forem Logo Open Forem Main Image

Open Forem

Follow

A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here

Gamers Forem Logo Gamers Forem Main Image

Gamers Forem

Follow

An inclusive community for gaming enthusiasts

Music Forem Logo Music Forem Main Image

Music Forem

Follow

From composing and gigging to gear, hot music takes, and everything in between.

Vibe Coding Forem Logo Vibe Coding Forem Main Image

Vibe Coding Forem

Follow

Discussing AI software development, and showing off what we're building.

Popcorn Movies and TV Logo Popcorn Movies and TV Main Image

Popcorn Movies and TV

Follow

Movie and TV enthusiasm, criticism and everything in-between.

DUMB DEV Community Logo DUMB DEV Community Main Image

DUMB DEV Community

Follow

Memes and software development shitposting

Design Community Logo Design Community Main Image

Design Community

Follow

Web design, graphic design and everything in-between

Security Forem Logo Security Forem Main Image

Security Forem

Follow

Your central hub for all things security. From ethical hacking and CTFs to GRC and career development, for beginners and pros alike

Golf Forem Logo Golf Forem Main Image

Golf Forem

Follow

A community of golfers and golfing enthusiasts

Scale Forem Logo Scale Forem Main Image

Scale Forem

Follow

For engineers building software at scale. We discuss architecture, cloud-native, and SRE—the hard-won lessons you can't just Google

Crypto Forem Logo Crypto Forem Main Image

Crypto Forem

Follow

A collaborative community for all things Crypto—from Bitcoin to protocol development and DeFi to NFTs and market analysis.

Forem Core Logo Forem Core Main Image

Forem Core

Follow

Discussing the core forem open source software project — features, bugs, performance, self-hosting.

Parenting Logo Parenting Main Image

Parenting

Follow

A place for parents to the share the joys, challenges, and wisdom that come from raising kids. We're here for them and for each other.

Maker Forem Logo Maker Forem Main Image

Maker Forem

Follow

A community for makers, hobbyists, and professionals to discuss Arduino, Raspberry Pi, 3D printing, and much more.

HMPL.js Forem Logo HMPL.js Forem Main Image

HMPL.js Forem

Follow

For developers using HMPL.js to build fast, lightweight web apps. A space to share projects, ask questions, and discuss server-driven templating

Dropdown menu Dropdown menu Add reaction Like Unicorn Exploding Head Raised Hands Fire Jump to Comments Save Boost More... Copy link Copy link Copied to Clipboard Share to X Share to LinkedIn Share to Facebook Share to Mastodon Share Post via... Report Abuse

In this post we are going to learn how to copy text on a webpage direct to our client device.

HTML Part

Note this only work with select text. Create a html file and copy the code below in the file.

<!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- The text field --> <input type="text" value="text me to copy" id="mycopy"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button> </body> </html> Enter fullscreen mode Exit fullscreen mode

What the above html code do is

<input type="text" value="text me to copy" id="mycopy"> Enter fullscreen mode Exit fullscreen mode
  • This is an input tag that will contain the value of the text we want to copy and the attribute id="mycopy" to identify the input tag that we also want to select and copy.
    • <button onclick="myFunction()">Copy text</button> Enter fullscreen mode Exit fullscreen mode
  • the above button tag contain onclick="myFunction()" which when user click on the button the text will be copy.

    • JavaScript Part

    <script> function myFunction() { /* Get the text field */ var copyText = document.getElementById("mycopy"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); } </script> Enter fullscreen mode Exit fullscreen mode

    What the above script code do is:

  • we create the myFunction() function tht will copy the text whenever is call

    • var copyText = document.getElementById("mycopy");

  • Here will get id of the text we want to copy "mycopy"

    • copyText.select();

  • This'll select the input/text area automatic, which will allow us to copy the selected text.
    • copyText.setSelectionRange(0, 99999); Enter fullscreen mode Exit fullscreen mode
  • This is to select the range of the text
    • document.execCommand("copy"); Enter fullscreen mode Exit fullscreen mode
  • This code copy the text to the clipboard.
    • <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- The text field --> <input type="text" value="text me to copy" id="mycopy"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button> <script> function myFunction() { /* Get the text field */ var copyText = document.getElementById("mycopy"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); } </script> </body> </html> Enter fullscreen mode Exit fullscreen mode

    Feel free to leave comment

    pic Create template

    Templates let you quickly answer FAQs or store snippets for re-use.

    Submit Preview Dismiss Code of Conduct • Report abuse

    Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

    Hide child comments as well

    Confirm

    For further actions, you may consider blocking this person and/or reporting abuse

    popoola Temitope Follow Am a software engineer
    • Location Nigeria
    • Joined May 8, 2021
    How to Integrate WebAuthn in Next.js #webauthn #biometric Build a Virtual Classroom App with Real-Time Transcription in React Native #javascript #ai #tutorial #reactnative Why GraphQL is gaining adoption #graphql #rest #programming
    DEV Community

    We're a place where coders share, stay up-to-date and grow their careers.

    Log in Create account

    Từ khóa » Html Code To Copy Text