您现在的位置是:首页 > 前端会客厅 > web前端web前端
js关于复制粘贴的一些相关操作
YU到边2021-01-11【web前端】人已围观
简介在一些网站中的信息是无法进行复制粘贴的,例如我们在注册一个用户时,密码框无法进行复制粘贴,那么是如何实现的呢
这里次要应用到了js的copy(复制)和paste(粘贴)两种办法
1:copy(复制)
<h1 id="nocopy">
这段文本不运行复制
</h1>
<script>
nocopyHtml = document.getElementById('nocopy')
nocopyHtml.oncopy = () => {
alert('不容许复制哦!')
return false;
}
</script>
如受骗咱们复制h1标签中的文字时会弹出禁止复制的提醒,并且文本信息无奈被复制
2:paste(粘贴)
<input type="text" id="nopaste">
<script>
nopasteHtml = document.getElementById('nopaste')
nopasteHtml.onpaste = () => {
alert('不容许粘贴哦!')
return false;
}
</script>
如受骗咱们向input框中粘贴咱们复制的内容时会弹出禁止粘贴的提醒,并且无奈将咱们复制的内容粘贴到文本框中
3:自行设置剪切板/获取的内容
<h1 id="nocopy">
这段文本不运行复制
</h1>
<input type="text" id="nopaste">
<script>
document.getElementById('nocopy').addEventListener('copy', (event) => {
const clipboardData =
event.clipboardData || event.originalEvent?.clipboardData;
clipboardData?.setData('text/plain', '复制的内容肯定是这个!');//设置剪切板内容
event.preventDefault();//告诉 Web 浏览器不要执行与事件关联的默认动作
})
document.addEventListener('paste', () => {
const clipboardData =
event.clipboardData || event.originalEvent?.clipboardData;
const text = clipboardData?.getData('text');//获取剪切板内容
console.log(text)
event.preventDefault()//告诉 Web 浏览器不要执行与事件关联的默认动作
})
</script>
Tags:js
很赞哦! ()
下一篇:前端判断用户登录状态