有趣的一键复制功能

news/2024/7/19 15:09:59 标签: html, js
htmledit_views">

今天产品经理提到了加一个一键复制文本到剪切板的功能,就去搜索了下相关功能是如何实现的,下面来给大家上代码。

html"><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
    </style>
</head>

<body>
    <html>
    <div class="box">
        <div id="box1">1111111111111111111111111111111111</div>
        <button>复制</button>
    </div>

    </html>
    <script>
        var btn = document.querySelector('button');
        var box = document.querySelector('#box1')
        btn.onclick = function () {
            var text = box.innerHTML;
            document.addEventListener('copy', save); // 监听浏览器copy事件
            document.execCommand('copy'); // 执行copy事件,这时监听函数会执行save函数。
            document.removeEventListener('copy', save); // 移除copy事件
            // 保存方法
            function save(e) {
                e.clipboardData.setData('text/plain', text); // 剪贴板内容设置
                e.preventDefault();
            }
        }
    </script>
</body>

</html>


http://www.niftyadmin.cn/n/875618.html

相关文章

mysql慢sql增加读写分离_MySQL主从同步、读写分离配置步骤

现在使用的两台服务器已经安装了MySQL,全是rpm包装的&#xff0c;能正常使用。为了避免不必要的麻烦&#xff0c;主从服务器MySQL版本尽量保持一致;环境&#xff1a;192.168.0.1 (Master)192.168.0.2 (Slave)MySQL Version:Ver 14.14 Distrib 5.1.48, for pc-linux-gnu (i686) …

vue移动端遮罩层滚动穿透问题

今天小编在做项目的时候发现了一个问题&#xff0c;各种查资料才得以解决。下面来简单介绍一下问题&#xff1a; 在页面中&#xff0c;我们需要点击按钮展示一个遮罩层&#xff0c;且遮罩层里面内容可滚动&#xff0c;但是遮罩层盖住的区域不可滚动&#xff0c;这样一个问题。…

vue项目运行后自动打开浏览器

很早就发现&#xff0c;有些项目在运行后会自动打开默认浏览器&#xff0c;但一直没想过这是什么原因。今天闲来无事看了一下&#xff0c;原来这么简单就可以实现。 打开我们项目的package.json "scripts": {"serve": "vue-cli-service serve --ope…

vue-cli项目的webpack打包优化

webpack 目录 相关知识 路由组件和其他组件异步加载 Ant Design of Vue组件库等的优化 gzip压缩 优化loadsh 图片压缩 CDN配置 代码压缩 公共代码抽离 相关知识 简单的配置方式 调整webpack最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象&…

MySQL锁未释放_MySQL 全局读锁一直没释放-爱可生

原标题&#xff1a;MySQL 全局读锁一直没释放-爱可生问题&#xff1a;在一个客户的线上监控告警中&#xff0c;提示主从延迟不断升高&#xff0c;我们登上数据库进行查看一下&#xff0c;发现 MySQL 从库复制状态提示 SQL 线程在 waiting for global read lock。在数据库的进程…

element-ui的返回顶部组件无效

今天在做项目中的时候&#xff0c;要加一个返回顶部的功能。因为项目中用到了饿了么的组件&#xff0c;所以就直接引用了Backtop这个组件。 我们在app.vue中写如下代码即可&#xff1a; <template><div id"app"><router-view /><el-backtop t…

阿里MYSQL数据库连接池druid_阿里数据库连接池druid详解

1.Druid介绍Druid是一个JDBC组件库&#xff0c;包括数据库连接池、SQL Parser等组件。DruidDataSource是目前最好的数据库连接池2.数据库连接池大比拼主要功能对比&#xff1a;DruidBoneCPDBCPC3P0ProxoolJBossTomcat-JdbcLRU是否是否是是?PSCache是是是是否否是PSCache-Oracl…

vue-i18n的简单使用兼容element-ui

1.首先下载vue-i18n npm i vue-18n --save 2.在项目根目录新建文件夹(自己命名)i18n.config.js,写如下代码 注意&#xff1a;小编在vue.config.js里面配置了路径别名&#xff0c;l指向src/lang目录 import Vue from vue import VueI18n from vue-i18n import Element from e…