Support more HTML input types. Close #800 (#808)

* Support more HTML input types. * Improve test description. Remove .only * Apply logic only when target is an input element
zenorocha · May 4, 2022 · 21db725 · 21db725
1 parent 08169bc
commit 21db725
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 11 deletions.
diff --git a/demo/target-input-number.html b/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>
diff --git a/dist/clipboard.js b/dist/clipboard.js
@@ -94,25 +94,40 @@ function createFakeElement(value) {
 
 
 
+/**
+ * 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
  * @param {Object} options
  * @return {String}
  */
 
+
 var ClipboardActionCopy = function ClipboardActionCopy(target) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
     container: document.body
   };
   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');