单击复制输入框一的内容到输入框二,双击清空内容html代码
时间: 2024-10-29 20:20:04 浏览: 8
在HTML中,如果你想要实现单击复制文本并清空某个输入框的功能,可以使用JavaScript来操作DOM元素。这里有一个简单的例子:
```html
<!-- 输入框一 -->
<input type="text" id="inputBoxOne" value="点击复制内容">
<!-- 输入框二 -->
<input type="text" id="inputBoxTwo" readonly>
<!-- 清除按钮 -->
<button onclick="copyAndClear()">复制并清空</button>
<script>
function copyToClipboard(text) {
// 创建一个临时的隐藏div,并设置其文本内容
var tempDiv = document.createElement('div');
tempDiv.textContent = text;
// 将文本节点添加到body上,以便复制
document.body.appendChild(tempDiv);
// 使用剪贴板API复制文本
navigator.clipboard.writeText(text);
// 清理
setTimeout(() => {
document.body.removeChild(tempDiv);
}, 0);
}
function copyAndClear() {
// 获取输入框一的内容
var inputBoxOneValue = document.getElementById("inputBoxOne").value;
// 复制内容到剪贴板
copyToClipboard(inputBoxOneValue);
// 清空输入框二
document.getElementById("inputBoxTwo").value = '';
}
</script>
```
在这个示例中,当用户点击"复制并清空"按钮时,`copyToClipboard`函数会获取`inputBoxOne`的值并将其复制到剪贴板,同时`inputBoxTwo`的内容会被清空。
阅读全文