js剪切板
2019-11-02 本文已影响0人
前端来入坑
有时候网站需要用到验证码的复制剪切粘贴，这个时候就需要考虑到js的复制剪切粘贴事件了，这个好办，js自带了捕捉用户的复制剪切粘贴事件。但有时候需要做到点击按钮复制验证码，那这个要怎么操作呢？请听以下分解......。
- oncopy 事件在用户拷贝元素上的内容时触发。
<body>
<input type="text" oncopy="myFunction()" value="尝试拷贝文本">
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "你拷贝了文本!"
}
</script>
</body>
- oncut 事件在用户剪切元素的内容时触发。
<body>
<input type="text" oncut="myFunction()" value="尝试剪切该文本">
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "你剪切了文本!";
}
</script>
</body>
- onpaste 事件在用户向元素中粘贴文本时触发。
<body>
<input type="text" onpaste="myFunction()" value="尝试在此处粘贴文本" size="40">
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "你粘贴了文本!";
}
</script>
</body>
- 点击按钮复制验证码
<input style="border:none;" id="copyValue" value="我会被复制" readonly />
<div class="btn" onClick="copy()">点击复制</div>
<script>
function copy(){
var myCopy = document.getElementById("copyValue");
myCopy.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好，可贴粘。");
}
</script>
