Sean Wade

Sean Wade

1656574500

HTML, CSS & JavaScript Tutotrial - "COPY LINK" Input Field

How to Create a "COPY LINK" Input Field with HTML, CSS & JavaScript

In today's tutorial we'll be creating a "Copy Link" input field using HTML, CSS and JavaScript. This is very easy to do and is a huge convenience to your users when performing an action like sharing a link.

HTML

<div class="copy-link">
  <input type="text" class="copy-link-input" value="https://www.youtube.com/" readonly>
  <button type="button" class="copy-link-button">
    <span class="material-icons">content_copy</span>
  </button>
</div>

CSS

.copy-link {
  --height: 36px;

  display: flex;
  max-width: 250px;
}

.copy-link-input {
  flex-grow: 1;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid #cccccc;
  border-right: none;
  outline: none;
}

.copy-link-input:hover {
  background: #eeeeee;
}

.copy-link-button {
  flex-shrink: 0;
  width: var(--height);
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dddddd;
  color: #333333;
  outline: none;
  border: 1px solid #cccccc;
  cursor: pointer;
}

.copy-link-button:hover {
  background: #cccccc;
}

JavaScript

document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
  const inputField = copyLinkParent.querySelector(".copy-link-input");
  const copyButton = copyLinkParent.querySelector(".copy-link-button");
  const text = inputField.value;

  inputField.addEventListener("focus", () => inputField.select());

  copyButton.addEventListener("click", () => {
    inputField.select();
    navigator.clipboard.writeText(text);

    inputField.value = "Copied!";
    setTimeout(() => (inputField.value = text), 2000);
  });
});

MATERIAL ICONS INSTALL:
https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts 

MATERIAL ICONS LIBRARY:
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.query=copy 

GET THE SOURCE CODE 👇
https://codepen.io/dcode-software/pen/eYMYXrK 

#html #css #javascript

What is GEEK

Buddha Community

HTML, CSS & JavaScript Tutotrial - "COPY LINK" Input Field
Sean Wade

Sean Wade

1656574500

HTML, CSS & JavaScript Tutotrial - "COPY LINK" Input Field

How to Create a "COPY LINK" Input Field with HTML, CSS & JavaScript

In today's tutorial we'll be creating a "Copy Link" input field using HTML, CSS and JavaScript. This is very easy to do and is a huge convenience to your users when performing an action like sharing a link.

HTML

<div class="copy-link">
  <input type="text" class="copy-link-input" value="https://www.youtube.com/" readonly>
  <button type="button" class="copy-link-button">
    <span class="material-icons">content_copy</span>
  </button>
</div>

CSS

.copy-link {
  --height: 36px;

  display: flex;
  max-width: 250px;
}

.copy-link-input {
  flex-grow: 1;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid #cccccc;
  border-right: none;
  outline: none;
}

.copy-link-input:hover {
  background: #eeeeee;
}

.copy-link-button {
  flex-shrink: 0;
  width: var(--height);
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dddddd;
  color: #333333;
  outline: none;
  border: 1px solid #cccccc;
  cursor: pointer;
}

.copy-link-button:hover {
  background: #cccccc;
}

JavaScript

document.querySelectorAll(".copy-link").forEach((copyLinkParent) => {
  const inputField = copyLinkParent.querySelector(".copy-link-input");
  const copyButton = copyLinkParent.querySelector(".copy-link-button");
  const text = inputField.value;

  inputField.addEventListener("focus", () => inputField.select());

  copyButton.addEventListener("click", () => {
    inputField.select();
    navigator.clipboard.writeText(text);

    inputField.value = "Copied!";
    setTimeout(() => (inputField.value = text), 2000);
  });
});

MATERIAL ICONS INSTALL:
https://developers.google.com/fonts/docs/material_icons#setup_method_1_using_via_google_fonts 

MATERIAL ICONS LIBRARY:
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons&icon.query=copy 

GET THE SOURCE CODE 👇
https://codepen.io/dcode-software/pen/eYMYXrK 

#html #css #javascript