Change text of button as it copies textarea

Question

Jon_7 0 Light Poster

9 Years Ago

I'm not extremely great at coding, but I'd like to have players in my basketball program be able to copy and paste some code (on their phones) from a textarea. The catch is I also want the button to turn green and say the words "Copied! Now open the app to import."

I've found code that looks like it can accomplish this here, but I have no clue on how to actually implement it with what I've created below.

Any help would be great. Thanks for your time!

<style>
.wpic{
width:115px;
height:115px;
border:2px black solid;
}
.wdescription{
font-family:tahoma;
font-size:11px;
text-align:RIGHT;
}
.wtitle{
font-family:tahoma;
font-size:18px;
text-align:left;
letter-spacing:4px;
text-transform:uppercase;
font-weight:bold;
padding-bottom:5px;
}

button.wbutton {
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 14px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: 15px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #1e2d4d;
  width: 100%;
  -webkit-background-clip: padding-box; }
  button.wbutton:hover {
    -webkit-box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  button.wbutton:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 58px; }

.wtext{
width:315px;
height:65px;
border:2px black solid;
font-size:10px;
letter-spacing:1px;
text-align:justify;
padding:6px;
}

.wtable{
border:3px solid black;
padding:10px;
background-color:#DADBAD;
}
</style>

<table class="wtable">
<tr><td colspan="2" class="wtitle">Michael Jordan Workout</td></tr>
<tr><td><img src="https://img.cinemablend.com/filter:centercrop/cb/2/8/3/7/6/e/28376e7a167db6e4f726ef113df3c97a10bad7d008f79a5fa38514f3ba3a647b.jpg?w=100&h=100" class="wpic"></td><td style="padding-left: 10px;">
<button class="wbutton">CLICK HERE TO COPY CODE</button><br>
<textarea class="wtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</td></tr>
<tr><td colspan="2" class="wdescription">--- Combines speed, agility, and strength in a fun way. ----</td></tr>
</table>

javascript:jquery

Edited 9 Years Ago by Jon_7

3 Contributors
7 Replies
416 Views
1 Day Discussion Span
Latest Post 9 Years Ago Latest Post by pdsubbu

Dani AI

Generated 9 Months Ago

Good milestone: provided a working copy + color-change that got the core behavior working for a single item, and confirmed it worked. To make that approach robust for multiple workout blocks, accessible to screen readers, and reliable on phones, apply a few focused refinements below.

Keep markup scalable and avoid duplicate IDs — put each textarea and its button in the same container (or use a data-target attribute) and attach a single delegated click handler. Prefer the modern Clipboard API (navigator.clipboard.writeText) when available (it runs in secure contexts and returns a Promise) and fall back to selecting the textarea and calling document.execCommand('copy'). On copy success store the original button label in dataset, add a short-lived class (e.g. copied) for the green styling, and call setTimeout to restore the original label and remove the class after a few seconds. When a new button is clicked, clear any other button’s pending revert timer and reset their state so only the most-recent button shows the “Copied” state.

Accessibility and fallbacks matter: update textContent (or value for inputs) rather than innerHTML, announce status via an aria-live region for screen readers, and don’t rely on color alone — include the message text. If programmatic copy fails (older iOS or restricted contexts), select the textarea and show an instruction like “Tap and hold the text to copy” so phone users can finish the action manually.

A concise pattern that ties these ideas together (delegation, Clipboard API + execCommand fallback, per-button revert and reset) is sketched below.

document.addEventListener('click', function(e) {
  const btn = e.target.closest('.wbutton');
  if (!btn) return;
  const container = btn.closest('.wtable') || document;
  const ta = container.querySelector('textarea');
  if (!ta) return;

  if (!btn.dataset.orig) btn.dataset.orig = btn.textContent || btn.value || '';

  document.querySelectorAll('.wbutton.copied').forEach(function(b){
    if (b === btn) return;
    b.classList.remove('copied');
    b.textContent = b.dataset.orig || b.textContent;
    if (b._revertTimer) clearTimeout(b._revertTimer);
  });

  const fallbackSelect = function(){
    ta.focus(); ta.select();
    return new Promise(function(resolve, reject){
      try { document.execCommand('copy') ? resolve() : reject(); }
      catch (err) { reject(err); }
    });
  };

  const write = (navigator.clipboard && navigator.clipboard.writeText)
    ? navigator.clipboard.writeText(ta.value)
    : fallbackSelect();

  write.then(function(){
    btn.classList.add('copied');
    btn.textContent = 'Copied! Now open the app to import.';
    btn._revertTimer = setTimeout(function(){
      btn.classList.remove('copied');
      btn.textContent = btn.dataset.orig;
    }, 3500);
  }).catch(function(){
    ta.focus(); ta.select();
    btn.textContent = 'Tap and hold the text to copy';
    setTimeout(function(){ btn.textContent = btn.dataset.orig; }, 3000);
  });
});

All 7 Replies

essential 84 Posting Shark

9 Years Ago

Hi,
Here's what i have so far, note that this will only work in IE9+ and as well with all modern browser out there...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Copying text over the clipboard</title>
  <style>
.wpic{
width:115px;
height:115px;
border:2px black solid;
}
.wdescription{
font-family:tahoma;
font-size:11px;
text-align:RIGHT;
}
.wtitle{
font-family:tahoma;
font-size:18px;
text-align:left;
letter-spacing:4px;
text-transform:uppercase;
font-weight:bold;
padding-bottom:5px;
}

button.wbutton {
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 14px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: 15px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #1e2d4d;
  width: 100%;
  -webkit-background-clip: padding-box;
   z-index: 100;}
  button.wbutton:hover {
    -webkit-box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  button.wbutton:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 58px; }

.wtext{
width:315px;
height:65px;
border:2px black solid;
font-size:10px;
letter-spacing:1px;
text-align:justify;
padding:6px;
}

.wtable{
border:3px solid black;
padding:10px;
background-color:#DADBAD;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.green-bg {
  background-color: #006400 !important;
}
</style>
</head>
<body>
  <div class="container">
    <table class="wtable">
    <tr><td colspan="2" class="wtitle">Michael Jordan Workout</td></tr>
    <tr>
      <td>
        <img src="https://img.cinemablend.com/filter:centercrop/cb/2/8/3/7/6/e/28376e7a167db6e4f726ef113df3c97a10bad7d008f79a5fa38514f3ba3a647b.jpg?w=100&h=100" class="wpic"></td><td style="padding-left: 10px;">
        <button id="btn" class="wbutton">CLICK HERE TO COPY CODE</button><br>
        <textarea id="txt" class="wtext">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                                qui officia deserunt mollit anim id est laborum.</textarea>
    </td>
  </tr>
    <tr>
      <td colspan="2" class="wdescription">--- Combines speed, agility, and strength in a fun way. ----</td>
    </tr>
    </table>

  </div>
  <script type="text/javascript">
    window.addEventListener('load', function(){
      var btn = document.getElementById('btn');
      var txt = document.getElementById('txt');
      var copied;
      btn.addEventListener('click', function(){
          txt.focus();
          if ( 'setSelectionRange' in txt ) {
            // #1 you can output the results inside any element
            txt.setSelectionRange(0, txt.value.length);
            var result = txt.value.substring(txt.selectionStart, txt.selectionEnd);
          //
            try {
              this.className =  this.className !== "wbutton green-bg" ? 'wbutton green-bg' : 'wbutton';
              this.innerHTML = 'Copied';
              copied = document.execCommand('copy');
              console.log('it worked! Text copied');
            } catch(e) {
              copied = null;
              console.log('That didn\'t work! Text are not copied');
            }
          }
      });
    });
  </script>
</body>
</html>

Edited 9 Years Ago by essential because: Title and removing some uneccessary elements

Jon_7 commented: Didn't work for me. I'm using Chrome on my desktop and also tried on the iPhone. Thx for the effort, though +0

essential 84 Posting Shark

9 Years Ago

Hi jon,
Here is it tested with the latest chrome version and as well with s7 edge using its native browser.

<!DOCTYPE html>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Copying text of textarea to clipboard</title>

  <style>
  * {
    margin: 0;
  }
  body {
    width: 100vw;
    height: 100vh;
    font-size: 100%;
  }
  .container {
    width: 100%;
    height: 100%;
  }
  .textarea-content {
    height: 300px;
    width: 400px;
    position: absolute;
    box-sizing: border-box;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ddd;
    padding:10px;

  }
  .header {
    line-height: 100px;
    text-align: center;
    clear: both;
  }
  img {
    display: inline-block;
    float: left;
  }
input[type='button'] {
  cursor: pointer;
  margin: 0 auto;
  height: 40px;
  min-width: 150px;
  border: thin solid #f1f1f1;
  background-image: none;
  background: #f9f9f9;
  border-radius: 2px;
  text-align: center;
}
.content {
  width: 100%;
  text-align:  center;
  padding-top: 10px;

}
textarea {
    margin: 0 auto;
     width: 95%;
     height: 100%;
     border: thin solid #f1f1f1;
     border-radius: 2px;
      overflow: hidden;
 }
.green-bg {
  background-color: #006400 !important;
  color: #fff;
}
  </style>
</head>
<body>
  <div class="container">
    <div class="textarea-content">
      <div class="header">
<img src="https://img.cinemablend.com/filter:centercrop/cb/2/8/3/7/6/e/28376e7a167db6e4f726ef113df3c97a10bad7d008f79a5fa38514f3ba3a647b.jpg?w=100&h=100" alt="Micheal Jordan"  width="100" height="100">
      <input id="btn" type="button" value='CLICK HERE TO COPY CODE'>
     </div>
    <div class="content">
      <textarea id="txt" rows="8">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
                                qui officia deserunt mollit anim id est laborum.
      </textarea>
    </div>
    </div>
  </div>
  <script type="text/javascript">

window.addEventListener('load', function(){
  var btn = document.getElementById('btn');
  var txt = document.getElementById('txt');
  var copied;
  btn.addEventListener('click', function(){
      txt.focus();
      if ( 'setSelectionRange' in txt ) {

        txt.setSelectionRange(0, txt.value.length);
      } else {

        txt.select();
      }
        try {
          this.className =  'green-bg';
          this.value = 'Copied';
          copied = document.execCommand('copy');
          console.log('it worked! Text copied');
        } catch(e) {
          copied = null;
          console.log('That didn\'t work! Text are not copied');
        }
      return copied;
  });
});
  </script>
</body>
</html>

Jon_7 commented: AWESOME!!!! +0

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Didn't work for me. I'm using Chrome on my desktop and also tried on the iPhone. Thx for the effort, though

Jon_7 0 Light Poster · Answer 1 · 2017-08-13T04:38:31+00:00

I've figured out how to COPY to CLIPBOARD, but still would love to know how to change the words and color of the button with the click. And since I'll have multiple workout codes on the same page, I was also thinking the color/word change should return when another button on the same page is clicked... or maybe only change for a few seconds. Is anyone out there?

<style>
.wpic{
width:115px;
height:115px;
border:2px black solid;
}
.wdescription{
font-family:tahoma;
font-size:11px;
text-align:RIGHT;
}
.wtitle{
font-family:tahoma;
font-size:18px;
text-align:left;
letter-spacing:4px;
text-transform:uppercase;
font-weight:bold;
padding-bottom:5px;
}
button.wbutton {
  background: #4162a8;
  border-top: 1px solid #38538c;
  border-right: 1px solid #1f2d4d;
  border-bottom: 1px solid #151e33;
  border-left: 1px solid #1f2d4d;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
  color: #fff;
  font: bold 14px/1 "helvetica neue", helvetica, arial, sans-serif;
  margin-bottom: 15px;
  padding: 10px 0 12px 0;
  text-align: center;
  text-shadow: 0 -1px 1px #1e2d4d;
  width: 100%;
  -webkit-background-clip: padding-box; 
}
  button.wbutton:hover {
    -webkit-box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 0 20px 1px #87adff, 0 1px 0 #1d2c4d, 0 6px 0 #1f3053, 0 8px 4px 1px #111111;
    cursor: pointer; }
  button.wbutton:active {
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111;
    margin-top: 0px; }
.wtext{
width:315px;
height:65px;
border:2px black solid;
font-size:10px;
letter-spacing:1px;
text-align:justify;
padding:6px;
}
.wtable{
border:3px solid black;
padding:10px;
background-color:#DADBAD;
}
</style>

<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
}//]]> 

</script>

<table class="wtable">
<tr><td colspan="2" class="wtitle">Michael Jordan Workout</td></tr>
<tr><td><img src="https://img.cinemablend.com/filter:centercrop/cb/2/8/3/7/6/e/28376e7a167db6e4f726ef113df3c97a10bad7d008f79a5fa38514f3ba3a647b.jpg?w=100&h=100" class="wpic"></td><td style="padding-left: 10px;">
<button class="wbutton js-textareacopybtn">CLICK HERE TO COPY CODE</button><br>
<textarea class="wtext js-copytextarea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
</td></tr>
<tr><td colspan="2" class="wdescription">--- Combines speed, agility, and strength in a fun way. ----</td></tr>
</table>

<script>
  // tell the embed parent frame the height of the content
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "wrL0j3xu"
    }], "*")
  }
</script>

essential 84 Posting Shark Featured Poster · Answer 2 · 2017-08-13T06:13:22+00:00

Hi Jon, sorry if that didn't work as what you have been expecting it to work in all major browser. ill try to fix it out for you as soon as i get home. ill keep you updated once i make it work in all aspects. thank you once again...

Jon_7 0 Light Poster · Answer 3 · 2017-08-13T19:07:18+00:00

WOW!! You've put me to shame with your skill. That worked perfectly. Now for me to delve into what you did and learn for myself. Thanks a ton!!!

essential 84 Posting Shark Featured Poster · Answer 4 · 2017-08-14T02:16:51+00:00

essential 84 Posting Shark

9 Years Ago

It's a pleasure Jon, thanks.

Edited 9 Years Ago by essential

pdsubbu 0 Web Designer Singapore · Answer 5 · 2017-08-14T06:23:27+00:00

Thanks !! I have the answer yet popped in to this question in delay!!

End of the Day - the query is solved!!

Change text of button as it copies textarea

Dani AI

Recommended Answers Collapse Answers

All 7 Replies

Recommended Answers