Logo

Clipboard Examples


       <div class="card card-custom">
        <div class="card-header">
         <div class="card-title">
          <h3 class="card-title">
           Clipboard Examples
          </h3>
         </div>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Basic Demo</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <div class="input-group">
             <input type="text" class="form-control" id="kt_clipboard_1" placeholder="Type some value to copy"/>
             <div class="input-group-append">
              <a href="#" class="btn btn-secondary" data-clipboard="true" data-clipboard-target="#kt_clipboard_1"><i class="la la-copy"></i></a>
             </div>
            </div>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Copy From Textarea</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <textarea class="form-control" id="kt_clipboard_2" 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>
            <div class="mt-4"></div>
            <a href="#" class="btn btn-secondary" data-clipboard="true" data-clipboard-target="#kt_clipboard_2"><i class="la la-clipboard"></i> Copy to clipboard</a>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Cut From Textarea</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <textarea class="form-control" id="kt_clipboard_3" 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>
            <div class="mt-4"></div>
            <a href="#" class="btn btn-primary" data-clipboard="true" data-clipboard-action="cut" data-clipboard-target="#kt_clipboard_3"><i class="la la-cut"></i>  Cut to clipboard</a>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Copy From Element</label>
           <div class="col-lg-6 col-md-9 col-sm-12">
            <div id="kt_clipboard_4" style="border: 4px solid #eaeaea; padding: 10px;">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.</div>
            <div class="mt-4"></div>
            <a href="#" class="btn btn-primary" data-clipboard="true" data-clipboard-target="#kt_clipboard_4"><i class="la la-cut"></i>  Copy to clipboard</a>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-success mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

       "use strict";
       // Class definition

       var KTClipboardDemo = function () {

        // Private functions
        var demos = function () {
         // basic example
         new ClipboardJS('[data-clipboard=true]').on('success', function(e) {
          e.clearSelection();
          alert('Copied!');
         });
        }

        return {
         // public functions
         init: function() {
          demos();
         }
        };
       }();

       jQuery(document).ready(function() {
        KTClipboardDemo.init();
       });

      
Copy to clipboard
Cut to clipboard
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.
Copy to clipboard

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo