Skip to content

Commit 21db725

Browse files
obetomunizobetomuniz
authored
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
1 parent 08169bc commit 21db725

File tree

5 files changed

+95
-11
lines changed

5 files changed

+95
-11
lines changed

‎demo/target-input-number.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>target-input-number</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
</head>
8+
<body>
9+
<!-- 1. Define some markup -->
10+
<input id="foo" type="number" value="0" />
11+
<button
12+
class="btn"
13+
data-clipboard-action="copy"
14+
data-clipboard-target="#foo"
15+
>
16+
Copy
17+
</button>
18+
19+
<!-- 2. Include library -->
20+
<script src="../dist/clipboard.min.js"></script>
21+
22+
<!-- 3. Instantiate clipboard -->
23+
<script>
24+
var clipboard = new ClipboardJS('.btn');
25+
26+
clipboard.on('success', function (e) {
27+
console.info('Action:', e.action);
28+
console.info('Text:', e.text);
29+
console.info('Trigger:', e.trigger);
30+
});
31+
32+
clipboard.on('error', function (e) {
33+
console.log(e);
34+
});
35+
</script>
36+
</body>
37+
</html>

‎dist/clipboard.js‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -94,25 +94,40 @@ function createFakeElement(value) {
9494

9595

9696

97+
/**
98+
* Create fake copy action wrapper using a fake element.
99+
* @param {String} target
100+
* @param {Object} options
101+
* @return {String}
102+
*/
103+
104+
var fakeCopyAction = function fakeCopyAction(value, options) {
105+
var fakeElement = createFakeElement(value);
106+
options.container.appendChild(fakeElement);
107+
var selectedText = select_default()(fakeElement);
108+
command('copy');
109+
fakeElement.remove();
110+
return selectedText;
111+
};
97112
/**
98113
* Copy action wrapper.
99114
* @param {String|HTMLElement} target
100115
* @param {Object} options
101116
* @return {String}
102117
*/
103118

119+
104120
var ClipboardActionCopy = function ClipboardActionCopy(target) {
105121
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
106122
container: document.body
107123
};
108124
var selectedText = '';
109125

110126
if (typeof target === 'string') {
111-
var fakeElement = createFakeElement(target);
112-
options.container.appendChild(fakeElement);
113-
selectedText = select_default()(fakeElement);
114-
command('copy');
115-
fakeElement.remove();
127+
selectedText = fakeCopyAction(target, options);
128+
} else if (target instanceof HTMLInputElement && !['text', 'search', 'url', 'tel', 'password'].includes(target === null || target === void 0 ? void 0 : target.type)) {
129+
// If input type doesn't support `setSelectionRange`. Simulate it. https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
130+
selectedText = fakeCopyAction(target.value, options);
116131
} else {
117132
selectedText = select_default()(target);
118133
command('copy');

0 commit comments

Comments
 (0)