单击input组件,复制input的value值到剪切板,并通过一个提示层提示“复制成功”的文字,这个提示层在2秒后自动消失。并且页面有多个input组件。
<!DOCTYPE html>
<html>
<head>
<title>复制内容示例</title>
<style>
.toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body>
<input type="text" id="input1" value="要复制的内容1" onclick="copyToClipboard('input1')">
<input type="text" id="input2" value="要复制的内容2" onclick="copyToClipboard('input2')">
<div class="toast" id="toast"></div>
<script>
function showToast(message, duration) {
var toast = document.getElementById("toast");
toast.textContent = message;
toast.style.opacity = 1;
setTimeout(function() {
toast.style.opacity = 0;
}, duration);
}
function copyToClipboard(inputId) {
var input = document.getElementById(inputId);
input.select();
input.setSelectionRange(0, input.value.length);
document.execCommand("copy");
showToast("复制成功!", 2000);
}
</script>
</body>
</html>