js 复制功能,点击按钮实现复制功能
时间: 2023-07-28 09:53:11 浏览: 91
可以使用 Clipboard API 来实现点击按钮复制文本的功能。以下是一个示例代码:
```html
<button id="copy-btn">复制文本</button>
<input type="text" id="text-to-copy" value="要复制的文本">
<script>
const copyBtn = document.querySelector('#copy-btn');
const textToCopy = document.querySelector('#text-to-copy');
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(textToCopy.value)
.then(() => {
console.log('文本已成功复制到剪贴板');
})
.catch((error) => {
console.error('复制文本失败:', error);
});
});
</script>
```
当用户点击“复制文本”按钮时,代码会将文本框中的文本复制到剪贴板中。值得注意的是,这需要用户的授权才能执行成功。
相关问题
js实现点击按钮复制功能
可以使用 Clipboard API 来实现点击按钮复制功能。以下是一个简单的实现示例:
HTML 代码:
```html
<button id="copy-btn" data-clipboard-text="要复制的内容">复制</button>
```
JavaScript 代码:
```javascript
// 引入 ClipboardJS 库
import ClipboardJS from 'clipboard';
// 初始化 ClipboardJS
new ClipboardJS('#copy-btn');
```
当用户点击按钮时,`data-clipboard-text` 属性中的内容将被复制到剪贴板中。你也可以使用 JavaScript 动态设置 `data-clipboard-text` 属性的值,以达到动态复制的效果。
原生js实现点击按钮复制功能
原生 JavaScript 实现点击按钮复制功能也是可以的,可以使用 `document.execCommand('copy')` 方法来实现。以下是一个简单的实现示例:
HTML 代码:
```html
<button id="copy-btn" data-copy-text="要复制的内容">复制</button>
```
JavaScript 代码:
```javascript
const copyBtn = document.querySelector('#copy-btn');
copyBtn.addEventListener('click', () => {
const copyText = copyBtn.getAttribute('data-copy-text');
const tempInput = document.createElement('input');
tempInput.value = copyText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
alert('已复制到剪贴板!');
});
```
当用户点击按钮时,JavaScript 会创建一个临时的 `<input>` 元素,并将要复制的内容设置为其 `value` 属性的值。然后将该元素插入到页面中,并选中该元素的内容,使用 `document.execCommand('copy')` 将其复制到剪贴板中。最后,再将该元素从页面中移除,完成复制操作。