2.0.11

* Support more HTML input types.

* Improve test description. Remove .only

* Apply logic only when target is an input element

.github/workflows/test.js.yml

@@ -5,9 +5,12 @@ name: build
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
+
+env:
+  FORCE_COLOR: 2
 
 jobs:
   build:
@@ -20,13 +23,12 @@ jobs:
         # For now is not possible to target LTS verssions =/ check progress here https://github.com/actions/setup-node/issues/26
 
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm run lint
-    - run: npm test
-
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm run lint
+      - run: npm test

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "clipboard",
-  "version": "2.0.8",
+  "version": "2.0.11",
   "description": "Modern copy to clipboard. No Flash. Just 3kb",
   "license": "MIT",
   "main": "dist/clipboard.js",

demo/constructor-node.html

@@ -20,11 +20,15 @@
       var clipboard = new ClipboardJS(btn);
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/constructor-nodelist.html

@@ -20,11 +20,15 @@
       var clipboard = new ClipboardJS(btns);
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/constructor-selector.html

@@ -19,11 +19,15 @@
       var clipboard = new ClipboardJS('.btn');
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/function-target.html

@@ -22,11 +22,15 @@
       });
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/function-text.html

@@ -21,11 +21,15 @@
       });
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/target-div.html

@@ -24,11 +24,15 @@
       var clipboard = new ClipboardJS('.btn');
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

demo/target-input-number.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>target-input-number</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <!-- 1. Define some markup -->
+    <input id="foo" type="number" value="0" />
+    <button
+      class="btn"
+      data-clipboard-action="copy"
+      data-clipboard-target="#foo"
+    >
+      Copy
+    </button>
+
+    <!-- 2. Include library -->
+    <script src="../dist/clipboard.min.js"></script>
+
+    <!-- 3. Instantiate clipboard -->
+    <script>
+      var clipboard = new ClipboardJS('.btn');
+
+      clipboard.on('success', function (e) {
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+      });
+
+      clipboard.on('error', function (e) {
+        console.log(e);
+      });
+    </script>
+  </body>
+</html>

demo/target-input.html

@@ -24,7 +24,9 @@
       var clipboard = new ClipboardJS('.btn');
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {

demo/target-textarea.html

@@ -24,11 +24,15 @@
       var clipboard = new ClipboardJS('.btn');
 
       clipboard.on('success', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
 
       clipboard.on('error', function (e) {
-        console.log(e);
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
       });
     </script>
   </body>

dist/clipboard.js

@@ -1,5 +1,5 @@
 /*!
- * clipboard.js v2.0.8
+ * clipboard.js v2.0.11
  * https://clipboardjs.com/
  *
  * Licensed MIT © Zeno Rocha
@@ -17,7 +17,7 @@
 return /******/ (function() { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
-/***/ 747:
+/***/ 686:
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -49,12 +49,12 @@ function command(type) {
     return false;
   }
 }
-;// CONCATENATED MODULE: ./src/clipboard-action-cut.js
+;// CONCATENATED MODULE: ./src/actions/cut.js
 
 
 /**
  * Cut action wrapper.
- * @param {HTMLElement} target
+ * @param {String|HTMLElement} target
  * @return {String}
  */
 
@@ -64,7 +64,7 @@ var ClipboardActionCut = function ClipboardActionCut(target) {
   return selectedText;
 };
 
-/* harmony default export */ var clipboard_action_cut = (ClipboardActionCut);
+/* harmony default export */ var actions_cut = (ClipboardActionCut);
 ;// CONCATENATED MODULE: ./src/common/create-fake-element.js
 /**
  * Creates a fake textarea element with a value.
@@ -90,10 +90,25 @@ function createFakeElement(value) {
   fakeElement.value = value;
   return fakeElement;
 }
-;// CONCATENATED MODULE: ./src/clipboard-action-copy.js
+;// CONCATENATED MODULE: ./src/actions/copy.js
 
 
 
+/**
+ * Create fake copy action wrapper using a fake element.
+ * @param {String} target
+ * @param {Object} options
+ * @return {String}
+ */
+
+var fakeCopyAction = function fakeCopyAction(value, options) {
+  var fakeElement = createFakeElement(value);
+  options.container.appendChild(fakeElement);
+  var selectedText = select_default()(fakeElement);
+  command('copy');
+  fakeElement.remove();
+  return selectedText;
+};
 /**
  * Copy action wrapper.
  * @param {String|HTMLElement} target
@@ -101,6 +116,7 @@ function createFakeElement(value) {
  * @return {String}
  */
 
+
 var ClipboardActionCopy = function ClipboardActionCopy(target) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     container: document.body
@@ -108,11 +124,10 @@ var ClipboardActionCopy = function ClipboardActionCopy(target) {
   var selectedText = '';
 
   if (typeof target === 'string') {
-    var fakeElement = createFakeElement(target);
-    options.container.appendChild(fakeElement);
-    selectedText = select_default()(fakeElement);
-    command('copy');
-    fakeElement.remove();
+    selectedText = fakeCopyAction(target, options);
+  } else if (target instanceof HTMLInputElement && !['text', 'search', 'url', 'tel', 'password'].includes(target === null || target === void 0 ? void 0 : target.type)) {
+    // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+    selectedText = fakeCopyAction(target.value, options);
   } else {
     selectedText = select_default()(target);
     command('copy');
@@ -121,8 +136,8 @@ var ClipboardActionCopy = function ClipboardActionCopy(target) {
   return selectedText;
 };
 
-/* harmony default export */ var clipboard_action_copy = (ClipboardActionCopy);
-;// CONCATENATED MODULE: ./src/clipboard-action-default.js
+/* harmony default export */ var actions_copy = (ClipboardActionCopy);
+;// CONCATENATED MODULE: ./src/actions/default.js
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 
@@ -163,20 +178,20 @@ var ClipboardActionDefault = function ClipboardActionDefault() {
 
 
   if (text) {
-    return clipboard_action_copy(text, {
+    return actions_copy(text, {
       container: container
     });
   } // Defines which selection strategy based on `target` property.
 
 
   if (target) {
-    return action === 'cut' ? clipboard_action_cut(target) : clipboard_action_copy(target, {
+    return action === 'cut' ? actions_cut(target) : actions_copy(target, {
       container: container
     });
   }
 };
 
-/* harmony default export */ var clipboard_action_default = (ClipboardActionDefault);
+/* harmony default export */ var actions_default = (ClipboardActionDefault);
 ;// CONCATENATED MODULE: ./src/clipboard.js
 function clipboard_typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { clipboard_typeof = function _typeof(obj) { return typeof obj; }; } else { clipboard_typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return clipboard_typeof(obj); }
 
@@ -241,8 +256,6 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
     _classCallCheck(this, Clipboard);
 
     _this = _super.call(this);
-    _this.ClipboardActionCut = clipboard_action_cut.bind(_assertThisInitialized(_this));
-    _this.ClipboardActionCopy = clipboard_action_copy.bind(_assertThisInitialized(_this));
 
     _this.resolveOptions(options);
 
@@ -289,23 +302,23 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
     key: "onClick",
     value: function onClick(e) {
       var trigger = e.delegateTarget || e.currentTarget;
-      var selectedText = clipboard_action_default({
-        action: this.action(trigger),
+      var action = this.action(trigger) || 'copy';
+      var text = actions_default({
+        action: action,
         container: this.container,
         target: this.target(trigger),
         text: this.text(trigger)
       }); // Fires an event based on the copy operation result.
 
-      this.emit(selectedText ? 'success' : 'error', {
-        action: this.action,
-        text: selectedText,
+      this.emit(text ? 'success' : 'error', {
+        action: action,
+        text: text,
         trigger: trigger,
         clearSelection: function clearSelection() {
           if (trigger) {
             trigger.focus();
           }
 
-          document.activeElement.blur();
           window.getSelection().removeAllRanges();
         }
       });
@@ -334,6 +347,13 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
         return document.querySelector(selector);
       }
     }
+    /**
+     * Allow fire programmatically a copy action
+     * @param {String|HTMLElement} target
+     * @param {Object} options
+     * @returns Text copied.
+     */
+
   }, {
     key: "defaultText",
 
@@ -359,12 +379,18 @@ var Clipboard = /*#__PURE__*/function (_Emitter) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
         container: document.body
       };
-      return clipboard_action_copy(target, options);
+      return actions_copy(target, options);
     }
+    /**
+     * Allow fire programmatically a cut action
+     * @param {String|HTMLElement} target
+     * @returns Text cutted.
+     */
+
   }, {
     key: "cut",
     value: function cut(target) {
-      return clipboard_action_cut(target);
+      return actions_cut(target);
     }
     /**
      * Returns the support of the given action, or all actions if no action is
@@ -858,7 +884,7 @@ module.exports.TinyEmitter = E;
 /******/ 	// module exports must be returned from runtime so entry inlining is disabled
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(747);
+/******/ 	return __webpack_require__(686);
 /******/ })()
 .default;
 });

package.js

@@ -3,7 +3,7 @@
 Package.describe({
   name: 'zenorocha:clipboard',
   summary: 'Modern copy to clipboard. No Flash. Just 3kb.',
-  version: '2.0.8',
+  version: '2.0.11',
   git: 'https://github.com/zenorocha/clipboard.js',
 });
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clipboard",
-  "version": "2.0.8",
+  "version": "2.0.11",
   "description": "Modern copy to clipboard. No Flash. Just 2kb",
   "homepage": "https://clipboardjs.com",
   "repository": "zenorocha/clipboard.js",

src/actions/copy.js

@@ -2,6 +2,22 @@ import select from 'select';
 import command from '../common/command';
 import createFakeElement from '../common/create-fake-element';
 
+/**
+ * Create fake copy action wrapper using a fake element.
+ * @param {String} target
+ * @param {Object} options
+ * @return {String}
+ */
+const fakeCopyAction = (value, options) => {
+  const fakeElement = createFakeElement(value);
+  options.container.appendChild(fakeElement);
+  const selectedText = select(fakeElement);
+  command('copy');
+  fakeElement.remove();
+
+  return selectedText;
+};
+
 /**
  * Copy action wrapper.
  * @param {String|HTMLElement} target
@@ -14,11 +30,13 @@ const ClipboardActionCopy = (
 ) => {
   let selectedText = '';
   if (typeof target === 'string') {
-    const fakeElement = createFakeElement(target);
-    options.container.appendChild(fakeElement);
-    selectedText = select(fakeElement);
-    command('copy');
-    fakeElement.remove();
+    selectedText = fakeCopyAction(target, options);
+  } else if (
+    target instanceof HTMLInputElement &&
+    !['text', 'search', 'url', 'tel', 'password'].includes(target?.type)
+  ) {
+    // If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+    selectedText = fakeCopyAction(target.value, options);
   } else {
     selectedText = select(target);
     command('copy');

src/clipboard.d.ts

@@ -39,7 +39,7 @@ declare class ClipboardJS {
   /**
    * Fires a copy action
    */
-   static copy(target: string | Element, options: CopyActionOptions): string;
+  static copy(target: string | Element, options?: CopyActionOptions): string;
 
    /**
    * Fires a cut action

src/clipboard.js

@@ -69,23 +69,23 @@ class Clipboard extends Emitter {
    */
   onClick(e) {
     const trigger = e.delegateTarget || e.currentTarget;
-    const selectedText = ClipboardActionDefault({
-      action: this.action(trigger),
+    const action = this.action(trigger) || 'copy';
+    const text = ClipboardActionDefault({
+      action,
       container: this.container,
       target: this.target(trigger),
       text: this.text(trigger),
     });
 
     // Fires an event based on the copy operation result.
-    this.emit(selectedText ? 'success' : 'error', {
-      action: this.action,
-      text: selectedText,
+    this.emit(text ? 'success' : 'error', {
+      action,
+      text,
       trigger,
       clearSelection() {
         if (trigger) {
           trigger.focus();
         }
-        document.activeElement.blur();
         window.getSelection().removeAllRanges();
       },
     });

test/actions/copy.js

@@ -51,5 +51,19 @@ describe('ClipboardActionCopy', () => {
 
       assert.equal(selectedText, text);
     });
+
+    it('should select its value in a input number based on text', () => {
+      const value = 1;
+      document.querySelector('#input').setAttribute('type', 'number');
+      document.querySelector('#input').setAttribute('value', value);
+      const selectedText = ClipboardActionCopy(
+        document.querySelector('#input'),
+        {
+          container: document.body,
+        }
+      );
+
+      assert.equal(Number(selectedText), value);
+    });
   });
 });

test/clipboard.js

@@ -158,6 +158,7 @@ describe('Clipboard', () => {
 
       clipboard.on('success', (e) => {
         assert.property(e, 'action');
+        assert.equal(e.action, 'copy');
         assert.property(e, 'text');
         assert.property(e, 'trigger');
         assert.property(e, 'clearSelection');
@@ -170,16 +171,16 @@ describe('Clipboard', () => {
   });
 
   describe('#clearSelection', () => {
-    it('should remove focus from target and text selection', (done) => {
+    it('should clear text selection without moving focus', (done) => {
       let clipboard = new Clipboard('.btn');
 
       clipboard.on('success', (e) => {
+        e.clearSelection();
+
         let selectedElem = document.activeElement;
         let selectedText = window.getSelection().toString();
 
-        e.clearSelection();
-
-        assert.equal(selectedElem, document.body);
+        assert.equal(selectedElem, e.trigger);
         assert.equal(selectedText, '');
 
         done();