Clipboard | CORK - Multipurpose Bootstrap Dashboard Template

The global Code for all the clipboards is new ClipboardJS('.jsclipboard');

Code

        

<div class="clipboard">
    <form class="form-horizontal">
        <div class="clipboard-input">
            <input type="text" class="form-control" id="copy-basic-input" value="http://www.admin-dashboard.com">
            <div class="copy-icon jsclipboard cbBasic" data-bs-trigger="click" title="Copied" data-clipboard-target="#copy-basic-input"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></div>
        </div>
    </form>
</div>

Code

<div class="clipboard">
<form class="form-horizontal">
<input type="text" class="form-control mb-4" id="input-copy" value="http://www.admin-dashboard.com">
<a class="mb-1 btn btn-primary jsclipboard" href="javascript:;" data-clipboard-action="copy" data-clipboard-target="#input-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy from Input</a>
<a class="mb-1 btn btn-dark jsclipboard" href="javascript:;" data-clipboard-action="cut" data-clipboard-target="#input-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> Cut from Input</a>
</form>
</div>

Code

        

<div class="clipboard">
<form class="form-horizontal">
<textarea class="form-control mb-4" rows="3" id="textarea-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</textarea>
<a class="mb-1 btn btn-primary jsclipboard" href="javascript:;" data-clipboard-action="copy" data-clipboard-target="#textarea-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy from Input</a>
<a class="mb-1 btn btn-dark jsclipboard" href="javascript:;" data-clipboard-action="cut" data-clipboard-target="#textarea-copy"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit-2"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path></svg> Cut from Input</a>
</form>
</div>

Basic

Copy from input

Copy from Text Area

Shaun Park

Need help?