0

I have this Bootstrap code which I would like to use to generate address and implement copy button functionality:

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

How I can copy the content from the input item and close the form when the value is copied into the clipboard?

Peter Penzov
  • 1,126
  • 134
  • 430
  • 808
  • You can use something like [https://clipboardjs.com/](https://clipboardjs.com/) – jcal Dec 09 '19 at 23:49
  • It's a simple html web page. Is there some some solution without third party libraries? – Peter Penzov Dec 09 '19 at 23:51
  • For a cross-browser cross-platform solution we're talking at least 500 lines of code, because there is no API around handling clipboard in web and each browser had the freedom to implement it how they pleased. Why would you trust 15 minute answers more than a repo with 27k stars? – tao Dec 10 '19 at 00:12
  • Lots of answers here without adding new libs: https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript – Iskandar Reza Dec 10 '19 at 00:21

1 Answers1

-1

You can use something like https://clipboardjs.com

p.s. To modify the state your site, you can use the success callback to modify the state of your site.

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

I showed you how to change the button text. Closing the modal should be similar.. Without knowing any details.. you probably have to remove or add a class to the modal to make it disappear. For the delay you can use setTimeout() https://www.w3schools.com/jsref/met_win_settimeout.asp

jcal
  • 871
  • 5
  • 14