Create a feature that allows users to easily copy text with

Looking to utilize this Bootstrap code for generating an address and adding 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>

Need a way to copy the input content and automatically close the form once it's copied into the clipboard. Any suggestions?

Answer №1

Consider utilizing a tool like

p.s. To update the condition of your website, leverage the success callback to adjust the state accordingly.

<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 demonstrated how to modify the button text. Closing the modal should follow a similar process.. Though specifics are lacking.. it may involve adding or removing a class from the modal to hide it. To introduce a delay, you can utilize setTimeout() https://www.w3schools.com/jsref/met_win_settimeout.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to format an image within an <a> element?

Below is a code snippet that includes a tags, with one containing an image. <div class="container"> <a href="#">Not styled</a> <a href="#"><img src="image.png"></a> </div> If I specifically want to style ...

Center alignment is not being applied to the SVG element

I am currently working with React and when my component renders, it displays an SVG inside a div. Here is a snippet of the code: render() { return( <div class="myClass"> <svg> ... </svg> </div> ); ...

SharePoint 2013 on a mobile device does not support scrolling within iframes

Recently, I set up a SharePoint 2013 website with a few iframes. However, when I access the site on my mobile devices (iPad and Android), I am unable to scroll through the entire page by touching within the iframe. I attempted to solve this issue by inclu ...

What's the Hold-Up with IntersectionObserver in Brackets?

As a novice in the world of web development, I have been utilizing Brackets as my main tool. Recently, I've encountered a few hurdles specifically related to javascript. One issue I'm facing is trying to implement lazy loading on a div containing ...

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

As I work on my website, I aim to display images in a compact space, such as within a 300x300 <div>. What I envision is the ability for users to preview or enlarge these images upon clicking, allowing for a closer and more detailed view. For exampl ...

What is the best way to interpret content within a span using aria-hidden?

I've been attempting to solve this problem for the past two hours, but I haven't had any success in finding a way to extract text from a span element that is hidden with an "aria-hidden=true" tag. The structure of the website's code looks li ...

Using Bootstrap 4 to create columns with fixed width and displaying the rest of the line in the card-footer

I have a bootstrap-4 card containing a footer. The footer consists of a fixed-width input field and a button. The button needs to expand to the width of 100% minus the width of the input field. https://jsfiddle.net/aq9Laaew/224543/ input { width:3rem; ...

Is it a good idea for the poster image to vanish too quickly before the video starts playing in HTML5?

Recently, I implemented a full-width background video on my website at www.sparkengine.tv. While the site is still a work in progress, some users have reported seeing the poster image before it disappears right before the video loads, creating a less-than- ...

What is the best way to center a form within a jumbotron using CSS?

I'm struggling to replicate a Bootstrap V4 template where I cannot seem to align the form in the center within a jumbotron div. However, all other text is centered as expected. Even though I copied the code from a tutorial, it functions perfectly the ...

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

Tips for implementing a custom filter in an AngularJS JavaScript controller

Can anyone help me with creating a custom filter in an AngularJS JavaScript controller? I need to be able to search for items in an array called segments by their SegmentId. The filter should iterate through the segments array and return the segment that ...

Connected selection menu

I have noticed several discussions on this topic, but many of them rely on JavaScript or focus solely on a standard drop-down list. I have developed a PHP function that generates drop-down menus based on select queries in my database. Currently, this part ...

.click function failing to trigger on dynamically loaded form

I'm facing an issue with a form that displays images from my database. After retrieving the filepaths, they are loaded dynamically into the form along with a "Delete" <button> for users to delete the image via AJAX. Although I can successfully ...

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Why does clicking on an anchor tag temporarily change the background of other tags that weren't clicked? What am I doing wrong? https://i.stack.imgur.com/ZKlUT.png Check out the code below: <nav class="navbar navbar-expand-lg navbar-light bg- ...

Having trouble with the Jquery animate() function?

I recently developed a jQuery animation where clicking on specific buttons triggers a hidden div to slide from left: -650px; to left: 0px;. You can see an example by clicking here. However, I've noticed that when another button is clicked to reveal a ...

What is the secret behind Facebook's ability to keep the chat bar fixed at the bottom of the browser window?

I am curious to learn about the method Facebook uses to keep the chat bar at the bottom of the browser window even when we scroll through the page. ...

Error 404: Django failing to load image on the webpage

Just starting out with Django and I've hit a snag trying to load a static file (image). Here's the error message I'm getting: 127.0.0.1/:1707 GET http://127.0.0.1:8000/static/css/static/images/background/1.jpg 404 (Not Found) I suspect th ...

What is the best way to dynamically adjust the size of a table or div when clicking in Angular 2?

Is there a way to dynamically resize a table or div in Angular 2 by clicking on a button or other element? I am attempting to change the width of a table from 300px to 100px using a function that utilizes CSS and TypeScript. table{ width: 300px; res ...

Tips for adjusting the order in which styles load in NuxtJS

I need to adjust the loading order of styles in my current project. In my custom stylesheet style.css, I've made some overrides, body { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; ...

Assistance needed in Android Studio for incorporating a button using a Style Sheet (CSS)

Hey there! I'm just starting out with Android programming and could use some guidance. Can someone assist me in creating three simple buttons for my app? The buttons should be colored green, blue, and red, with a thin glowing outline around them. If ...