From 21db7250edff24892cdd7076df708d9140fc06fb Mon Sep 17 00:00:00 2001 From: Beto Muniz Date: Wed, 4 May 2022 14:47:44 -0300 Subject: [PATCH] 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 --- demo/target-input-number.html | 37 +++++++++++++++++++++++++++++++++++ dist/clipboard.js | 25 ++++++++++++++++++----- dist/clipboard.min.js | 2 +- src/actions/copy.js | 28 +++++++++++++++++++++----- test/actions/copy.js | 14 +++++++++++++ 5 files changed, 95 insertions(+), 11 deletions(-) create mode 100644 demo/target-input-number.html diff --git a/demo/target-input-number.html b/demo/target-input-number.html new file mode 100644 index 0000000..c537384 --- /dev/null +++ b/demo/target-input-number.html @@ -0,0 +1,37 @@ + + + + + target-input-number + + + + + + + + + + + + + + diff --git a/dist/clipboard.js b/dist/clipboard.js index a4695db..2fd2d92 100644 --- a/dist/clipboard.js +++ b/dist/clipboard.js @@ -94,6 +94,21 @@ 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 @@ -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'); diff --git a/dist/clipboard.min.js b/dist/clipboard.min.js index 41c6a0f..a3aa4f4 100644 --- a/dist/clipboard.min.js +++ b/dist/clipboard.min.js @@ -4,4 +4,4 @@ * * Licensed MIT © Zeno Rocha */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ClipboardJS=e():t.ClipboardJS=e()}(this,function(){return n={686:function(t,e,n){"use strict";n.d(e,{default:function(){return o}});var e=n(279),i=n.n(e),e=n(370),u=n.n(e),e=n(817),c=n.n(e);function a(t){try{return document.execCommand(t)}catch(t){return}}var f=function(t){t=c()(t);return a("cut"),t};var l=function(t){var e,n,o,r=1 { + 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'); diff --git a/test/actions/copy.js b/test/actions/copy.js index 201c1d6..6c13b5d 100644 --- a/test/actions/copy.js +++ b/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); + }); }); });