js控制用户禁止复制、粘贴操作

庂言（前端）

已于 2022-08-18 17:22:00 修改

阅读量4.1k

点赞数 1

文章标签： javascript 前端 css vue.js

于 2022-05-13 15:07:09 首次发布

本文链接：https://blog.csdn.net/weixin_43947536/article/details/124752038

版权

1.使用场景

不允许用户在输入框中进行“复制文本”、“粘贴文本”操作；

2.demo代码

<template>
  <div class="box">
    <textarea id="edit" cols="30" rows="10" :value="msg" @input="inputHandle"></textarea>
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from "@vue/reactivity";
let msg = ref("123");

// 禁止复制回调
const nocopy = () => {
    let edit = document.getElementById("edit");
    edit.oncopy = function() {
        alert("触发复制");
        return false;
    };
};
// 禁止粘贴回调
const nopaste = () => {
    let edit = document.getElementById("edit");
  edit.onpaste = function() {
    alert("触发粘贴");
    return false;
  };
};
const inputHandle = () => {
  nocopy();
  nopaste();
};
</script>
 
<style scoped lang="scss">
.box {
  margin: 0 auto;
  width: 700px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3. 运行结果