Implement copy button functionality - html

Question

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">×</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?

Answer 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