Jqlipboard NPM

jQlipboard

jQlipboard is a jQuery extension that makes accessing the clipboard much easier. This plugin also has features that make it usable across all modern browsers.

The following is a brief tutorial on how to use jQlipboard. Full documentation can be found here.

Installation

To install, simply add the following script tag below the tag where jQuery.js is called:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://diriectordoc.github.io/jQlipboard-Docs/src/v0.3/jQlipboard.js"></script>

Or, for a minified script:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://diriectordoc.github.io/jQlipboard-Docs/src/v0.3/jQlipboard.min.js"></script>

Copying

There are a few ways to add text to the clipboard. To simply copy a string to the clipboard use $.copy(str):

$.copy("This string will be copied")

To copy the text in an <input> or <textarea>, simply use $(...).copy():

let element = $('<input type="text" />').val("This text will bo copied").appendTo("body")

/* The value of the textarea is copied */
element.copy()

Using $(...).copy() on any other type of element will instead copy the inside text.

<body>
	<div id="copy-text">This text will be coppied</div>

	<script>
		$("#copy-text").copy()
	</script>
</body>

Selecting

Using $(...).select() will highlight the target element. This will work on almost any element. This function extends the use of the existing jQuery function .select(), which will trigger instead if used on an <input> or <textarea> element.

<body>
	<div id="select-text">This text will be selected</div>

	<script>
		$("#select-text").select()
	</script>
</body>

Calling the function $.deselect() will nullify any selection there may be on the page.

jquery clipboard extension

jquery

0.3.0

3 years ago