关闭对话框时重置按钮标签

Question

我正在使用此代码来实现复制到剪贴板功能：

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>

此代码工作正常，但是当我第二次打开对话框时，看到文本按钮Copied。每次打开对话框时如何重置按钮的标签？

Answer 1

在模型显示上添加此代码，需要将文本重置为原始语言

<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 id="copyBtn" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1. 打开前重置

document.getElementById("copyBtn").innerHTML = "Copy!";

2. 隐藏之前重置

$("#bitcoinModal").on("hidden.bs.modal", function (e) {
    document.getElementById("copyBtn").innerHTML = "Copy!";
})

希望它可以帮助您满足需要。

Answer 2

您可以将文本的“重置”附加到模态上的关闭或隐藏事件。

首先，用button修改id：

<button id="btnCopyToClip" class="btn btn-width-165 btn-primary" onclick="return copyToClipboard(event, this);">Copy</button>

然后，在您的JS中，在模式上为hidden.bs.modal添加事件侦听器：

hidden.bs.modal

Answer 3

这里是代码：

$("#bitcoinModal").on("hidden.bs.modal", function (e) {
    let btnCopyToClip = document.getElementById("btnCopyToClip");
    btnCopyToClip.innerText = "Copy";
});

在js中添加代码：

https://jsfiddle.net/aviboy2006/3k7z2c64/1/

添加您的公开模式代码：

    function openModal(){
      $("#bitcoinModal").modal();
      $('.btn-width-165').html("Copy");
    }