在输入框后面加一个按钮实现一键复制内容
时间: 2024-03-24 11:41:38 浏览: 20
要实现在输入框后面加一个按钮实现一键复制内容,可以使用JavaScript的Clipboard API来实现。具体的步骤如下:
1. 在HTML中添加一个输入框和一个按钮,给按钮添加一个id,用于后面获取DOM元素。
```
<input type="text" id="inputBox">
<button id="copyButton">复制</button>
```
2. 在JavaScript中获取按钮和输入框的DOM元素,并给按钮添加一个点击事件监听器。
```
const inputBox = document.querySelector('#inputBox');
const copyButton = document.querySelector('#copyButton');
copyButton.addEventListener('click', function() {
// 复制文本到剪贴板的代码
});
```
3. 在按钮的点击事件监听器中,使用Clipboard API的writeText()方法将输入框中的文本复制到剪贴板中。
```
copyButton.addEventListener('click', function() {
navigator.clipboard.writeText(inputBox.value)
.then(() => {
console.log('复制成功');
})
.catch(err => {
console.error('复制失败:', err);
});
});
```
这样就可以实现在输入框后面加一个按钮实现一键复制内容的功能了。