Copy the Value of an Input

Step 1 - Code

Below is some custom javascript that you should add before the closing <body> tag.

CUSTOM JS
<!--🟢 COPY BUTTON CODE 🟢-->
<script>
const copyBtns = document.querySelectorAll('[data-copy-button]');copyBtns.forEach(copyBtn => {
 const inputId = copyBtn.getAttribute('data-copy-button');
 const input = document.querySelector(`[data-input="${inputId}"]`);  copyBtn.addEventListener('click', async () => {
   try {
     await navigator.clipboard.writeText(input.value);
     console.log('Text copied to clipboard');
     
     // Change button text to "Copied" and add class "success" for 3 seconds
     const originalBtnText = copyBtn.innerHTML;
     copyBtn.innerHTML = 'Copied';
     copyBtn.classList.add('success');
     setTimeout(() => {
       copyBtn.innerHTML = originalBtnText;
       copyBtn.classList.remove('success');
     }, 3000);
     
   } catch (err) {
     console.error('Failed to copy text: ', err);
   }
 });
});
</script>

Step 2 - Attributes

Make sure your input and your copy button have attributes that look like data-input="INPUT_NAME" and data-copy-button="INPUT_NAME".

The "INPUT_NAME" is something that you pick. As long as the button and input match each other you should be fine.

Step 3 - Multiple inputs

If you have multiple input/button pairs on the same page be sure to change the "INPUT_NAME" so that each pair is unique.

Step 4 - Styling

When the copy button is clicked, a class of Success is added for 3 seconds. You can style it below.

This input type can work with Memberstack too.

Clone the Complete UI Kit 👇

Everything below is an iframe. Click "Clone in Webflow" to get yourself a copy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.