mirror
/
clipboard.js
mirror of https://github.com/zenorocha/clipboard.js.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Beto Muniz 2022-05-04 14:47:44 -03:00 committed by GitHub
parent 08169bce8c
commit 21db7250ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
demo/target-input-number.html Normal file
View File

@ -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>

25
dist/clipboard.js vendored
View File

@ -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');

2
dist/clipboard.min.js vendored
View File

File diff suppressed because one or more lines are too long

28
src/actions/copy.js
View File

@ -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');

14
test/actions/copy.js
View File

@ -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);
});
});
});