最近项目活动中用到复制文本功能，发现在chrome中之前的clipboard的demo失效了，查了下发现是因为版本升级导致的。最新用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.copy-link{
width: 478px;
height: 96px;
background: #333;
margin: 28px auto 0;
font-size: 32px;
color: #ac6c44;
line-height: 86px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="link" class="link-url indent">即将被复制的内容</div>
<div onselectstart="return false" class="copy-link" data-clipboard-action="copy" data-clipboard-target="#link">复制链接</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
var clipboard = new ClipboardJS('.copy-link');
clipboard.on('success', function(e) {
console.log(e);
alert('复制成功');
});
clipboard.on('error', function(e) {
alert('复制失败');
});
});
</script>
</html>
 
另附上另一种复制方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="link-box">
<div id="link-box">
<div class="link-con">
Hello World!
</div>
<div class="link-url">您的专属链接：</div>
<div class="link-url indent">hello world!!!</div>
</div>
<div onselectstart="return false" class="copy-link">复制链接</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.js"></script>
<script src="clipboard.js"></script>
<script>
$('.copy-link').click(function(){
copyTxt('link-box');
});
// 复制功能
function copyTxt(con) {
const range = document.createRange();
range.selectNode(document.getElementById(con));
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
alert("复制成功！");
}
</script>
</html>
 

js实现点击按钮复制文本功能的更多相关文章

  1. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  2. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. JS复制文本到粘贴板，前端H5移动端点击按钮复制文本

    <span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...

  4. vue点击按钮复制文本框内容

    1.npm进行安装 npm install clipboard --save 2.在需要使用的组件中import 引用方法:import Clipboard from 'clipboard'; 3.添 ...

  5. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  6. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  7. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  8. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  9. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

随机推荐

  1. vue.js 精学组件记录

    组件需要注册后才可以使用. Vue.component('my-component',{ template:'<div>这是组件内容</div>' }): 局部注册组件 var ...

  2. python 测试登录接口只返回response200的问题

    但是使用postman测试是有json串的 后来发现postman传参是用的raw格式,raw的格式相当于json 而这里的data其实是form-data格式,需要用json的格式

  3. python类的语法和底层实现

    语法: class 类名: name = “egon”    # 类属性 def __init__(self): self.age = 18  # 对象属性 self.__sex = "fe ...

  4. 前端---JQuery初识

    ---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...

  5. angular6 开发实践基础知识汇总

    1 事件处理 1.1   鼠标移入事件触发 (mouseenter)=" "               eg:   (mouseenter)="isCollapsed= ...

  6. jquery 禁止回车事件响应

    $(this).keydown( function(e) { var key = window.event?e.keyCode:e.which; if(key.toString() == " ...

  7. IS基础（函数片）

    函数基本介绍 为什么需要函数 之所以需要函数,是因为函数可以实现对代码的复用.相同的代码,我们不需要再重复书写,只需要书写一次就足够了.函数有些时候可以看做是一个暗箱.我们不需要知道函数内部是怎么实现 ...

  8. 初学高级程序设计 shell编程

    初学shell编程,遇到的一些问题和总结: 一.#!/bin/sh 为什么要在shell程序里要加这一行? 首先在shell编程里面,"#"符号确实是一个注释符号,但是在这里绝对不 ...

  9. ketlle windows下的安装(最基本)

    ketlle基本介绍 kettle是纯java开发,开源的etl工具.可以在Linux.windows.unix中运行.有图形界面,也有命令脚本还可以二次开发. kettle其实是以前的叫法,现在官方 ...

  10. one-hot编码

    1 get_dummies函数 有多少种不同类就会产生多少位的编码,生成的age_df 实际上是一个变量,其存储着dataframe数据类型 完全可按dataframe对其操作 age_df = pd ...