文档章节

js实现复制内容到剪贴板

o
 osc_zoa3moe9
发布于 2019/12/07 19:28
字数 143
阅读 16
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一、 原生js实现,电脑可以用,手机不可以用

  1. 必须是 input元素 才可以使用

    <input id="code" type="text" value="www">

    <span class="copy-btn" v-on:click="copy">复制</span>

    //获取input并执行选中

    document.getElementById('code').select();

    //执行documen的copy事件
    document.execCommand('copy');

二、clipboard.js 实现,电脑、手机都可以用  https://github.com/zenorocha/clipboard.js

  1.  input、div 任何元素都可以使用

    <span id="code">123456</span>

    <span class="copy-btn" data-clipboard-target="#code" v-on:click="copy">复制</span>

    let clipboard = new ClipboardJS('.copy-btn');
    clipboard.on('success', function(e) {
      //复制成功
      console.log("复制成功");
      //取消选中
      e.clearSelection();
    });







o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
一些编写高性能HTML应用的足球平台出租

足球平台出租Q199995657稳定平台出租-你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可怜...

hg新2体育
2018/05/19
0
0
js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

Javascript原生有一些事件:copy、paste、cut, 这些事件可以作用的目标元素:   能获得焦点的元素 (如内容能编辑或者可以选中的元素),或者是 <div id="cardList">  <div class="btn">......

osc_k5ta3dng
2018/05/16
12
0
「译」利用 JavaScript 复制文本到剪贴板

原文地址:Copying text to clipboard with JavaScript 原文作者:Angelos Chalaris 本文将会深入介绍 30 秒代码 中 代码块的工作原理。你可以在项目仓库中找到它的源代码以及更多其他的实用...

Chorer
2019/05/31
0
0
IE与火狐中常见的一些兼容问题

document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(火狐)下运行 (2)解决方法: 复制内容到剪贴板 代码: 改用 docu...

zhengguogaun
2013/06/19
54
0
chrome-extension:Copy with URL(将复制的选中文字转变为超链接文本)

简介 这是一个chrome-extension,实现了一个增强文字复制的功能,我给它起名叫做Copy with URL。 它能够将选中的纯文本变身为超链接文本,你可以将超链接文本粘贴在其他支持插入超链接文本的...

osc_d6r1n9ox
2018/06/08
10
0

没有更多内容

加载失败,请刷新页面

加载更多

使用命名管道承载gRPC

最近GRPC很火,感觉整RPC不用GRPC都快跟不上时髦了。 gRPC设计 gRPC是一种与语言无关的高性能远程过程调用 (RPC) 框架。刚好需要使用一个的RPC应用系统,自然而然就盯上了它,但是它真能够解...

osc_nq69o22c
49分钟前
16
0
06-敏捷开发框架-apis 脚本库 引用位置无关性设计

动态引入技术的设计,对我们来说非常重要。 同时也说明动态语言的使用对我们来说也是非常重要。 没有动态语言的支撑,有些想法可能不容易实现,或者有替代方案,可能会花更大的代价。 前端开...

osc_5zg9z6t1
51分钟前
21
0
(三)学习了解OrchardCore笔记——灵魂中间件ModularTenantContainerMiddleware的第一行①的模块部分

  了解到了OrchardCore主要由两个中间件(ModularTenantContainerMiddleware和ModularTenantRouterMiddleware)构成,下面开始了解ModularTenantContainerMiddleware中间件第一行代码。   ...

osc_kdarxvx0
52分钟前
15
0
50Mn18Cr4V锻锻环件

电机无磁护环怎么锻性能才能《高高》?50Mn18Cr4V高锰无磁钢在变形温度为900~1 100℃、应变速率为0.1 ~10s-1条件下的热变形行为. 结果,VC第二相的应变诱导析出对50Mn18Cr4V的热变形行为产生...

无磁钢
53分钟前
16
0
【遇见offer】一汽-大众实习生专场来啦!成长+学习+福利,一个也不能少~

在上次一汽-大众的社招直播之后,实习生的专场招聘也终于来啦! 针对2020年暑期,我们提供了非常多的实习岗位给大家选择。 如果你想得到大厂实习的宝贵经验,如果你想得到更快速的成长,如果...

osc_b88oux8w
54分钟前
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部