Sure you can always just highlight text and then ctrl+c, but sometimes due to text constraints (large text) or just for ease of use to your users, allowing them to quickly copy content with a single button click can be very helpful.
You can set up a quick copy and paste configuration as follows.
Now if you open Notepad (or your favorite text editor) and paste, you'll see your written text.
1. Create an input field
The first thing that you'll need is a text input box with a few attributes in place. Mainly just the type set to "text" and an id value. Note that this also works the same for the <textarea> element.
<input type="text" placeholder="enter some text" id="input1" class="form-control">
<button onclick="copyText()" class="btn">Copy text</button>
2. copyText() function
let copyText = document.getElementById("input1");
// focus on the element
// Select the text field
// Copy the text inside the text field
The actual copying to the clipboard happens with the execCommand() method, which I'll break down further below.
The execCommand(actionname) method can run commands against an editable region on a web page, such as the <input>, <textarea> and <div>'s (if a div, it must be set to contenteditable='true'). There are various action's that you can pass as an argument that will allow you to edit the content in these fields.
For this particular use case we should use the "copy" action, but you can perform other operations such as "paste", "undo", "redo", "underline" and "bold" to just name a few. For a full list of action items you can check out the MDN page right over here.
And there you have it. The copyText() function above is generic enough that you should include it in your own personal coding library for whenever the need arises.