js 复制粘贴2中方法使用

前端小云儿

已于 2024-03-20 14:25:18 修改

阅读量473

点赞数

CC 4.0 BY-SA版权

分类专栏： vue知识点以及es6语法使用文章标签： vue.js elementui javascript

于 2022-07-15 16:27:04 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/125807438

vue知识点以及es6语法使用专栏收录该内容

89 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在JavaScript中实现复制和粘贴操作的两种常见方法，包括使用`document.execCommand`和现代浏览器的`Clipboard API`。通过示例代码详细解释了每种方法的用法，并对比了它们的适用场景和兼容性差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="wrapper">
    <el-input v-model="Name1" id="refUrlName" class="input-readonly"></el-input>

    <el-button @click="clickCopyFun">复制111</el-button>

    <el-input v-model="Name2" id="idUrlName" class="input-readonly"></el-input>
    <el-button @click="jsFun('idUrlName')">复制222</el-button>
  </div>
</template>
<script>
export default {
  name: "Table",

  components: {},
  data() {
    return {
      Name1: "",
      Name2: "",
    };
  },
  methods: {
    jsFun(id) {
      const data = document.getElementById(id).value;
      const copyToClipboard = (text) =>
        navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
      copyToClipboard(