复制按钮功能答案

【问题标题】：Copy button functionality复制按钮功能
【发布时间】：2020-04-03 07:09:02
【问题描述】：

我有这个引导代码，我想用它来生成地址和实现复制按钮功能：

<div class="modal fade" id="bitcoinModal" role="dialog">
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="container">
                            <div class="offset-top-20 text-md-left">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h3>Copy address</h3>
                            </div>
                            <div class="section-60 offset-top-35">

                                <div class="offset-top-20 text-md-center">
                                  <form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
                                    <div class="form-group form-group-outside">
                                      <div class="input-group">
                                        <label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
                                        <input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="@Required"/>
                                      </div>
                                      <div class="input-group-btn">
                                        <button class="btn btn-width-165 btn-primary" type="submit">Copy</button>
                                      </div>
                                    </div>
                                  </form>
                                </div>

                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
              </div>

如何将输入项中的内容复制到剪贴板？如何将文本更改为“已复制”

【问题讨论】：

所以要将输入项复制到剪贴板？
是的，将按钮的标签更改为“已复制”。

标签： javascript html bootstrap-4 bootstrap-modal

【解决方案1】：

function copyKey(id) {
            var copyText = document.getElementById(id);
            copyText.select();
            document.execCommand("copy");
        }

        function copy_IP() {
            var copy_Text = document.getElementById('our_ip');

            //create temporary input to copy text as our input is hidden so we need to create another input 
            var tempInput = document.createElement("input");
            tempInput.style = "position: absolute; left: -1000px; top: -1000px";
            tempInput.value = copy_Text.value;
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand("copy");
            document.body.removeChild(tempInput);

            //show success message
            toastr.info(copyText.value, 'IP Copied to Clipboard');
        }

您可以使用上述任何功能

【讨论】：

【解决方案2】：

为此使用execCommand。

function myFunction() {
  var copyTextfield = document.getElementById("myInput");
  copyTextfield.select();
  document.execCommand("copy");
  alert("Copied the text: " + copyTextfield.value);
  copyTextfield.value = "Copied";
}

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

【讨论】：

我看到 2 个问题 - 显示附加对话框：Copied the text: .... 并且文本值已更改。有什么方法可以防止这种情况发生吗？

【解决方案3】：

这应该可行：

function copyToClipboard(e, btn) {
  e.preventDefault();     // prevent submit
  var str = document.getElementById("forms-subscribe-email");
  str.select();
  document.execCommand('copy');
  btn.innerHTML = "Copied!";
  return false;           // prevent submit
}

<div class="modal fade" id="bitcoinModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="container">
        <div class="offset-top-20 text-md-left">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3>Copy address</h3>
        </div>
        <div class="section-60 offset-top-35">

          <div class="offset-top-20 text-md-center">
            <form class="rd-mailform form-inline-custom text-left" data-form-output="form-output-global" data-form-type="subscribe" method="post" action="http://.........">
              <div class="form-group form-group-outside">
                <div class="input-group">
                  <label class="form-label form-label-outside text-dark" for="forms-subscribe-email">Bitcoin Address</label>
                  <input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="@Required" />
                </div>
                <div class="input-group-btn">
                  <button class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

我得到了 UI 结果，但没有复制值。
@PeterPenzov 这绝对有效...请再试一次。