代码详解JS操作剪贴板

javascript可以轻松操作客户端剪贴板内容，不过只适用IE5以上浏览器。

javascript可以使用window.clipboardData对象处理剪贴板内容。

保存到剪贴板的方法setData(param1, param2)。

param1 :数据类型 text 或 URL等。

param2 :数据内容。

从剪贴板读出数据的方法 getdata(param1)

清空数据的方法 clearData(param1)

<HTML>
<HEAD>
<TITLE>测试操作剪贴板</TITLE>
</HEAD>
<script>
function copyToClipboard()
{
 var d=document.all("source").value;
 window.clipboardData.setData('text',d);
}
</script>
<BODY>
<button onclick="copyToClipboard();">拷贝</button>
<input type="text" size=20 id="source" value="测试数据">
<br>
<button onclick="alert(window.clipboardData.getData('text'));">显示</button>
<button onclick="window.clipboardData.clearData('text');">清空</button>
</BODY>
</HTML>  

下面是另一个例子实现页面中选中字符，并拖拉到文本区功能。注意其中的window.event.dataTransfer对象也可处理剪贴板内容，不过只能用在 drag-and-drop 操作中。
<HTML>
<HEAD>
<TITLE>测试操作剪贴板2</TITLE>
</HEAD>
<script>
function transferDrop() {
   window.event.srcElement.innerText = window.event.dataTransfer.getData("text");
   window.event.returnValue = false;
}
function transferDrag() {
 window.event.dataTransfer.dropEffect = 'move';
 window.event.returnValue = false;
}
</script>  

<BODY>
<p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed = 'move';">选择我们并把我们拖到下面的textarea</p>
<textarea id="myTarget" ondrop="transferDrop();" ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">
</textarea>
</BODY>
</HTML>

您可能感兴趣的文章:

  • 20行JS代码实现粘贴板复制功能
  • JS复制对应id的内容到粘贴板（Ctrl+C效果）
  • JavaScript实现复制内容到粘贴板代码
  • js实现点击图片将图片地址复制到粘贴板的方法
  • js 实现复制到粘贴板的功能代码
  • JS复制特定内容到粘贴板
赞 (0)

相关推荐

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

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

  • js 实现复制到粘贴板的功能代码

    他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa

  • JS复制对应id的内容到粘贴板（Ctrl+C效果）

    前言 最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url.一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西.后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦. 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr> <td> <a id="copy_{$key}" oncli

  • js实现点击图片将图片地址复制到粘贴板的方法

    本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • 20行JS代码实现粘贴板复制功能

    使用剪贴板是一项基本技能.作为码农都应知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦.复制.粘贴的快捷键. 而对普通用户可能就不太容易了.即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字.若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能. 那么我们是否应该提供一个"复制到剪贴板&q

  • JS复制特定内容到粘贴板

    <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("txt"); t.select(); window.clipboardData.setData('text',t.createTextRa

  • 代码详解JS操作剪贴板

    javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器. javascript可以使用window.clipboardData对象处理剪贴板内容. 保存到剪贴板的方法setData(param1, param2). param1 :数据类型 text 或 URL等. param2 :数据内容. 从剪贴板读出数据的方法 getdata(param1) 清空数据的方法 clearData(param1) <HTML> <HEAD> <TITLE>测试操

  • JavaScript操作class和style样式代码详解

    废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!doctype html> <html> <head> <meta charset="utf-"> <title>无标题文档</title> <style> .fontSize { font-size:px; } .fontWeight { font-weight:bold; } </style> </head> &l

  • Vue.js实现可配置的登录表单代码详解

    表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下. 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有的客户还希望能有手机号+验证码+密码的登录方式-所以登录方式的灵活性需要可配置的表单支持,于是我把登录组件做了拆分. 以表单元素为粒度,分离出了手机号.密码.短信验证码这几个组件,它们内部都有自己的表单验证方法,通过组合可以快速完成登录.注册.找回密码等表单组件.高内聚低耦合.高内聚低耦合-跟着

  • 使用 Node.js 实现图片的动态裁切及算法实例代码详解

    背景&概览 目前常见的图床服务都会有图片动态裁切的功能,主要的应用场景用以为各种终端和业务形态输出合适尺寸的图片. 一张动辄以 MB 为计量单位的原始大图,通常不会只设置一下显示尺寸就直接输出到终端中,因为体积太大加载体验会很差,除了影响加载速度还会增加终端设备的内存占用.所以要想在各种终端下都能保证图片质量的同时又确保输出合适的尺寸,那么此时就需要根据图片 URL 来对原始图片进行裁切,然后动态生成并输出一张新的图片. URL 的设计 图片 URL 需要包含图片 id.尺寸.质量等信息.有两种

  • vue 下列表侧滑操作实例代码详解

    由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧.有点多 效果如图 <template> <div class="lottery-management-wrapper"> <ul> <li class="lottery-management-list-wrapper"> <div class="lottery-management-list" v-for="(item ,

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • ActiveX控件的使用-js实现打印超市小票功能代码详解

    ·应客户的需求= = ,要在网页端实现打印小票的功能 ·先来一张打印出的小票效果图(合计明显不对,因为有修改订单功能,请各位忽略) 用什么方法实现呢: 我想应该是有三种吧 1.用第三方的浏览器控件(这个好似比较方便,我的老师也是这样建议我)向大家推荐一个 Lodop打印控件 2.用CSS写好模板,然后直接用页面打印的方法(应该是这样吧) 以上两种还没有尝试,这两天陆续尝试) 3.用微软自己的ActiveX控件(ActiveX控件可以实现调用本地的文件等操作(之前试过调用cmd,实现shutdow

  • Java连接操作Oracle数据库代码详解

    Java连接操作Oracle数据库代码详解

    废话不多说了,直接给大家贴关键代码了,具体代码如下所示: package com.sp.test; import java.sql.*; import java.util.*; public class Text_lianxi extends Thread { public void run() { try { yunxing(); Thread.sleep(10000); } catch (InterruptedException e) { // TODO 自动生成的 catch 块 e.pr

  • java编程无向图结构的存储及DFS操作代码详解

    java编程无向图结构的存储及DFS操作代码详解

    图的概念 图是算法中是树的拓展,树是从上向下的数据结构,结点都有一个父结点(根结点除外),从上向下排列.而图没有了父子结点的概念,图中的结点都是平等关系,结果更加复杂. 无向图                                                       有向图 图G=(V,E),其中V代表顶点Vertex,E代表边edge,一条边就是一个定点对(u,v),其中(u,v)∈V. 这两天遇到一个关于图的算法,在网上找了很久没有找到java版的关于数据结构中图的存储及其

  • Hibernate中Session增删改查操作代码详解

    Hibernate中Session增删改查操作代码详解

    把三状态转换图放在这,方便分析方法的作用: 1.Session的save()方法 Session是Hibernate所有接口中最重要的接口,提供了对数据保存,更新,查询和删除的方法. Session的save()方法可以使临时态或游离态转换为持久态.例如,保存一个Customer对象: SessionFactory sessionFactory; Configuration configuration = new Configuration().configure(); sessionFacto

随机推荐