JavaScript实现一键复制内容剪贴板

目录
  • 引言
  • 代码
  • 实现效果

引言

有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用JavaScript原生的方法进行设置剪贴板。

代码

copy.html

<!DOCTYPE html>
<html>
<head>
    <title>一键复制demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        h2{
            text-align: center;
            margin-top: 20px;
        }
        #neirong{
            width: calc(90% - 20px);
            padding:10px 10px;
            margin:20px auto;
            background: #eee;
            border-radius: 5px;
        }
        #copy{
            border:none;
            width: 90%;
            height: 45px;
            background: #39f;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
            border-radius: 5px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<h2>一键复制demo</h2>
<div id="neirong">这是内容这是内容这是内容这是内容</div>
<button id="copy">复制</button>

<script>
function copyArticle(event){
      const range = document.createRange();
      range.selectNode(document.getElementById('neirong'));
      const selection = window.getSelection();
      if(selection.rangeCount > 0) selection.removeAllRanges();
      selection.addRange(range);
      document.execCommand('copy');
      alert("复制成功");
}

window.onload = function () {
  var obt = document.getElementById("copy");
  obt.addEventListener('click', copyArticle, false);
}
</script>
</body>
</html>

实现效果

以上就是JavaScript实现一键复制内容剪切板的详细内容，更多关于JavaScript一键复制内容的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • js实现一键复制功能

    项目描述:最近做一个移动端活动页面,用户抽奖后会生成一个兑换码,为了优化用户体验,需要做一个复制按钮,能够一键复制兑换码. 项目需求: 兼容移动端所有主流浏览器.并且做为安卓和IOS的H5页面. 目前能够实现复制功能的方法有以下几种: execCommand("copy"); clipboardData; ZeroClipboard.js 1.execCommand:是doucment对象的方法,可以实现浏览器菜单的很多功能,如保存文件,打开新文件,撤销,复制,等等.可以更好的完成文本

  • 在vue使用clipboard.js进行一键复制文本的实现示例

    需求 最近在做商城项目,有个需求是需要点击复制订单号的,然后就觉得可以使用原生的复制方法和使用第三方库. 浏览器原生方法 这种方式兼容性不是太好,还要看浏览器是否支持,容易采坑. //在IE中可以用window.clipboardData.setData('text','内容')实现. //在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来

  • 原生js实现点击按钮复制内容到剪切板

    原生js实现点击按钮复制内容到剪切板

    本文实例为大家分享了js点击按钮复制内容到剪切板的具体代码,供大家参考,具体内容如下 效果图 上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)

    新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下 使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipboard.js/tree/master 引入插件:目录\clipboard.js-master\dist\clipboard.min.js 目录中有各种demo,分别实现了固定的文字复制,input的复制等等,可以看下找找思路: 下边来记录下使用的方式: 一:引入插件: <script src=&quo

  • JS实现一键复制

    JS实现一键复制

    原生js实现点击按钮复制文本,供大家参考,具体内容如下 最近遇到一个需求,需要点击按钮,复制 聊天记录的文本到剪切板 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板 但是 select() 方法只对 和 有效,对于就不好使 最后我的解决方案是,在页面中添加一个 ,然后把它隐藏掉点击按钮的时候,先把 的

  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • JavaScript使用ZeroClipboard操作剪切板

    一.ZeroClipboard下载地址 为大家提供细一些ZeroClipboard的下载地址: Zero Clipboard 开源的 JavaScript+flash 复制库类 基于ZeroClipboard实现的网站内容复制粘贴JS特效源码 zeroclipboard 用js与flash实现的复制到剪切板的文件 二.添加js引用 <script src="../Assets/js/jquery-1.8.3.min.js"></script> <scrip

  • JavaScript实现一键复制内容剪贴板

    JavaScript实现一键复制内容剪贴板

    目录 引言 代码 实现效果 引言 有时候为了方便用户快速复制页面的内容,一般的做法就是添加一个按钮给用户点击一下就复制下来了,这边使用JavaScript原生的方法进行设置剪贴板. 代码 copy.html <!DOCTYPE html> <html> <head> <title>一键复制demo</title> <meta charset="utf-8"> <meta name="viewport

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • 表单提交时自动复制内容到剪贴板的js代码

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>交时自动复制到剪贴板</title> </head> <script language="JavaScript"> /*功能:提交时自动复制到剪贴板 */ function copyTe

  • 兼容主流浏览器的JS复制内容到剪贴板

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

  • 用js将内容复制到剪贴板兼容浏览器

    若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容.原理就不细讲了,下面说下如何实现. 比如我的html代码如下: 复制代码 代码如下: <div class="buttonBox"> <code rel="1"><span id="id_1">要复制的内容1</span><

  • js复制内容到剪贴板代码,js复制代码的简单实例

    如下所示: <script type="text/JavaScript"> function jsCopy(){ var e=document.getElementById("contents");//对象是contents e.select(); //选择对象 document.execCommand("Copy"); //执行浏览器复制命令 } </script> <textarea id="conte

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

  • JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

  • JS实现复制内容到剪贴板功能

    JS实现复制内容到剪贴板功能

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

随机推荐