html - 实现复制按钮功能

Question

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

<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>

如何复制输入项的内容并在值复制到剪贴板时关闭表单？

Answer 1

你可以使用类似 https://clipboardjs.com 的东西

附注要修改您网站的状态，您可以使用成功回调来修改您网站的状态。

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

<input class="form-control" id="forms-subscribe-email" type="text" name="bitcoin_address" value="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy " data-constraints="@Required" />
<input type="button" value="copy" id="copy-button" data-clipboard-text="3J98t1WpEZ73CNmQviecrnyiWrnqRhWNLy" />

<script>
  var clipboard = new ClipboardJS('#copy-button');
  var button = document.querySelector('#copy-button')

  clipboard.on('success', function(e) {
    button.value = "copied"
  });
</script>

我向您展示了如何更改按钮文本。关闭模态应该是类似的。不知道任何细节......你可能必须删除或添加一个类到模态以使其消失。对于延迟，您可以使用 setTimeout() https://www.w3schools.com/jsref/met_win_settimeout.asp