<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(); });
