Overview Official Website

Choices.js is a lightweight and powerful datetime picker.

Usage

Find the JS file for the following chart at: resources/js/components/form-clipboard.js

Copy text from another element #

The value you include on this attribute needs to match another's element selector.

html
javascript

                                                                 
                                                                      <div class="input-group">
                                                                           <input id="clipboard_example" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
                                                                           <button class="btn btn-primary btn-copy-clipboard" data-clipboard-target="#clipboard_example"> Copy </button>
                                                                      </div>

                                                                 
                                                                      // Select elements
                                                                      const target = document.getElementById('clipboard_example');
                                                                      const button = target.nextElementSibling;

                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(button, {
                                                                           target: target,
                                                                           text: function () {
                                                                                return target.value;
                                                                           }
                                                                      });

                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = button.innerHTML;

                                                                           // Exit label update when already in progress
                                                                           if (button.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }

                                                                           // Update button label
                                                                           button.innerHTML = 'Copied!';

                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                button.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });

Cut text from another element #

Additionally, you can define a data-clipboard-action attribute to specify if you want to either copy or cut content.

html
javascript

                                                                 
                                                                      <textarea id="clipboard_cut" class="form-control mb-3" cols="62" rows="6">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
                                                                      <button class="btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard_cut"> Copy </button>

                                                                 
                                                                      // Select elements
                                                                      const target = document.getElementById('clipboard_cut');
                                                                      const button = target.nextElementSibling;

                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(button, {
                                                                           target: target,
                                                                           text: function () {
                                                                                return target.innerText;
                                                                           }
                                                                      });

                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = button.innerHTML;

                                                                           // Exit label update when already in progress
                                                                           if (button.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }

                                                                           // Update button label
                                                                           button.innerHTML = 'Copied!';

                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                button.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });

Copy text from attribute #

Truth is, you don't even need another element to copy its content from. You can just include a data-clipboard-text attribute in your trigger element.

html
javascript

                                                                 
                                                                      <button id="clipboard_text" class="btn btn-primary" data-clipboard-text="Just because you can doesn't mean dfdyou should — clipboard.js">
                                                                           Copy to clipboard
                                                                      </button>

                                                                 
                                                                      // Select element
                                                                      const target = document.getElementById('clipboard_text');

                                                                      // Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
                                                                      var clipboard = new ClipboardJS(target);

                                                                      // Success action handler
                                                                      clipboard.on('success', function (e) {
                                                                           const currentLabel = target.innerHTML;

                                                                           // Exit label update when already in progress
                                                                           if (target.innerHTML === 'Copied!') {
                                                                                return;
                                                                           }

                                                                           // Update button label
                                                                           target.innerHTML = 'Copied!';

                                                                           // Revert button label after 3 seconds
                                                                           setTimeout(function () {
                                                                                target.innerHTML = currentLabel;
                                                                           }, 3000)
                                                                      });