jquery.text-select

Text Select

A jQuery plugin to select, unselect and, if supported by the browser, copy text

Installation

Install with NPM:

npm install --save jquery.text-select

Usage

• Include jQuery
• Include jquery.text-select.js:

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.text-select.js"></script>

• Alternatively you can use webpack / browserify:

require('jquery.text-select');

<script>
  $(document).ready(function(){
    $("#selectMe").selectText(); // Hightlight / select the text
    $("#selectMe").selectText(false); // Clear the selection

    $("#copyMe").copyText(); // Copy text to clipboard


  });
</script>

Methods

• selectText(select): Selects the text; if false is passed unselects the text
• copyText(): Copies the text to clipboard, if supported by the browser (see notes below)

Events

• selecttext.selected: When text is selected
• selecttext.unselected: When the selection is cleared
• selecttext.copied: When text is successfully copied to the clipboard

Notes

This plugin is a jQuery wrapper for code presented by https://stackoverflow.com/users/96100/tim-down, https://stackoverflow.com/users/339850/gert-grenander and https://stackoverflow.com/users/406712/dean-taylor.

The plugin depends on document.execCommand('copy'), which according to MDN has the following support:

Browser	Support
Chrome	(Yes)
Edge	(Yes)
Firefox	41
IE	9
Opera	29
Safari	10

For security reasons, the command may only be executed following user interaction, so the event should be bound to an apprpriate handler (e.g. click).

For utility, the plugin attaches a boolean property canCopyText to the global jQuery object. This will be true or false. You can use this to check for browser support and show / hide copy buttons as appropriate. If the copyText command is run without browser support no action will be taken and a warning logged to the console.