Create a copy link Input Field

How to Create a “copy link” Input Field | HTML, CSS & JavaScript

Creating the “copy link” input field is a handy way to quickly copy and paste links into a document or web page. It can be created using HTML, CSS, and JavaScript.

Demo of the “copy link” Input Field.

Here is the demo of this tutorial:

Create input field and button

To create the input field, first, create an element with an id of “copy-link-input“. Then, create an element within the with a type of “text” and an id of “copy-link-field“. Finally, add an element with an id of “copy-link-button“.

Also Read: How to create a back-to-top button for web pages without JavaScript?

    <div id="copy-link-input">
        <input type="text" id="copy-link-field" />
        <button id="copy-link-button">Copy</button>
    </div>

When the user clicks on the “copy link” button, the contents of the input field will be copied to the clipboard.

Use JavaScript to add functionality to the input field, such as automatically selecting the text when the user clicks on the field.

let button = document.getElementById("copy-link-button");
let inputField = document.getElementById("copy-link-field");

    button.addEventListener("click", () => {
    
    // select text of input field
    inputField.select();

    // copy the selected text
    document.execCommand('copy');
}

You can also add a “copy” event listener to the button to copy the contents of the input field to the clipboard when the user clicks the button.

Show a message on a copy link or text.

You can show a toast or alert message. However, we will show a basic message by changing the text on the “copy button” using JavaScript.

button.addEventListener("click", () => {
    
    // select text of input field
    inputField.select();

    // copy the selected text
    document.execCommand('copy');
   
    // change the text of copy-button
    button.innerText = "COPIED!";

    // reset the text on copy button after one second
    setTimeout(() => (button.innerText = "COPY"), 1000);
}

Add Style to the “copy link” Input Field and button

You can use CSS to style the input field and button. It will match the look and feel of your web page or application.

Now you just successfully create a “copy link” Input Field using HTML, CSS, and JavaScript.

#copy-link-input {
  padding: 100px;
  margin: 100px;
  border-radius: 10px;
  box-shadow: 1px 2px 3px #ddd;
  display: flex;
  justify-content: center;
  gap: 10px;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

#copy-link-field {
  padding: 0.8rem;
  border-radius: 5px;
  width: 400px;
  color: gray;
  font-size: 1.1rem;
  border: 1px solid #ddd;
}
#copy-link-field:focus {
  outline: gray;
  box-shadow: 1px 2px 3px #eee;
}

#copy-link-button {
  padding: 0.5rem;
  border-radius: 5px;
  border: none;
  width: 150px;
  cursor: pointer;
  color: #fff;
  letter-spacing: 0.2rem;
  background: linear-gradient(
    45deg,
    rgb(245, 120, 31),
    rgb(245, 163, 119)
    );
}
#copy-link-button:hover {
   box-shadow: 1px 2px 3px rgb(249, 123, 6);
}

Add comment