title: Copying to clipboard textbox value using jQuery/JavaScript
body: <p>I have a textbox &amp; button which looks like this:</p>
  
  <pre><code>     &lt;div class="col-xs-11" style="padding:20px 0 "&gt;
       &lt;input type="text" class="form-control txtKeywords" id="txtKeyw" style="margin-bottom:10px; height:45px;" maxlength="80" placeholder="Click on keywords to combine your title"&gt;
     &lt;button type="submit" class="btn btn-space btn-success btn-shade4 btn-lg copyToClipboard"&gt;
      &lt;i class="icon icon-left s7-mouse"&gt;&lt;/i&gt; Copy to Clipboard
       /button&gt;
  </code></pre>
  
  <p>And when the user clicks the button copy to clipboard, I'd like to copy the contents of the textbox into the clipboard like this:</p>
  
  <pre><code>$(document).on("click", ".copyToClipboard", function () {
      copyToClipboard("txtKeyw");
      successMessage();
  });
  </code></pre>
  
  <p>Where the definition of the <code>copyToClipboard</code> function is:</p>
  
  <pre><code> function copyToClipboard(element) {
              var $temp = $("&lt;input&gt;");
              $("body").append($temp);
              $temp.val($(element).text()).select();
              document.execCommand("copy");
              $temp.remove();
          }
  </code></pre>
  
  <p>But when I do this, nothing happens -- no values are copied to clipboard from the textbox... What am I doing wrong here?</p>
  
  <p><strong>MORE INFORMATION:</strong></p>
  
  <ul>
  <li>This happens in both Chrome 59 64-bit and Firefox 54 32-bit.</li>
  <li><code>successMessage()</code> is called and displayed in the browser.</li>
  <li>Adding <code>#</code> in front of the element's ID does not resolve the issue.</li>
  </ul>