`

js复制内容到粘贴版(多按钮复制)

阅读更多

参考源码:http://www.cnblogs.com/peng-li/

js方面的:

//火狐等浏览器的js复制功能(多按钮复制)
var VideoIdClip = {
    Clip: null,
    ClipContainer: null,
    InitClip: function() {
        VideoIdClip.Clip = new ZeroClipboard.Client();
        VideoIdClip.ClipContainer = $("#ClipSwf");
        VideoIdClip.Clip.setHandCursor(true);
        VideoIdClip.Clip.setCSSEffects(true);
        VideoIdClip.Clip.addEventListener( "complete", function(){
            correct_msgpop("复制成功");
                });
        VideoIdClip.ClipContainer.html(VideoIdClip.Clip.getHTML(20, 20));
    },
    SetClipValue: function(vid) {
        //BrowserClip.IEClip($(SelectorEl).val());           
        var offset = $("#clip_"+vid).offset();
        VideoIdClip.ClipContainer.offset({ left: offset.left, top: offset.top });
        VideoIdClip.Clip.setText(vid);
    }
};

html方面的:

<div id="ClipSwf" style="left:-100px; position:absolute; width:20px; height:20px; cursor:pointer;"></div>

.clipswf embed{outline:0;}:防止火狐下的点击虚线框。

在加载的时候$(function(){

    //初始化复制按钮
    VideoIdClip.InitClip();

});

在td或者tr或者p标签里面:

<td width="160px" onmouseover="VideoIdClip.SetClipValue('${video.ecryptId}')">

<a href="#" title="复制"  id="clip_${video.ecryptId}"></a>

这样就完成了复制的功能了。

分享到:
评论

相关推荐

    使用clipboard.js实现页面内容复制到剪贴板

    如果需要根据用户交互动态生成复制内容,可以不使用`data-clipboard-text`属性,而是通过JavaScript获取和设置要复制的文本,然后在创建Clipboard实例时传入一个回调函数: ```javascript var copyButton = ...

    手机移动端 js复制粘贴

    在标题“手机移动端 js复制粘贴”中,我们聚焦于使用JavaScript实现在移动设备上实现一键复制到剪贴板的功能。这个功能在现代Web应用中非常常见,比如用户可能需要复制一段代码、链接或者任何其他文本信息。 描述...

    js复制到粘贴板.zip

    在标题"js复制到粘贴板.zip"中提到的,是关于如何利用JavaScript实现从网页中复制文本到用户系统剪贴板的功能。这个压缩包包含了一个完整的资源,可能包括示例代码和必要的文件,用于演示这一过程。 描述中提到的...

    移动端js 点击按钮复制到粘贴

    综上所述,实现移动端JavaScript点击按钮复制到粘贴的功能,需要结合`document.execCommand()`和`navigator.clipboard` API,同时处理异步操作、权限问题以及浏览器兼容性。提供的`clipboard`文件可能包含了一个完整...

    ZeroClipboard(JS复制内容到粘贴板)

    - 然后,创建一个或多个需要复制内容的按钮,并为它们分配唯一的ID。 - 初始化ZeroClipboard实例,设置剪贴板的文本内容,以及关联复制功能的按钮。 - 添加事件监听器,以便在用户点击按钮时触发复制操作。 4. *...

    H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: &lt;!DOCTYPE html&gt; &lt;...

    jquery 一键复制指定内容到剪贴板

    "jquery 一键复制指定内容到剪贴板"是jQuery的一个常见应用,用于实现用户点击按钮后快速将特定文本复制到剪贴板的功能。这个功能在现代Web应用中广泛使用,比如复制代码示例、URL链接或任何其他需要快速共享的信息...

    JavaScript按钮类\一个按钮完成对文本框内容的copy和复制

    - **`JM_cc`**:此函数用于复制文本框中的内容到剪贴板。 - 参数: - `ob`:待复制内容的文本框对象名。 - 实现逻辑: - 使用`MM_findObj`函数找到文本框对象。 - 选择文本框中的所有文本。 - 创建一个文本...

    js实现复制和粘贴

    在JavaScript中实现复制和粘贴功能,通常涉及到浏览器的API以及一些第三方库的使用。这里主要介绍两种常见的方法:一种是使用原生的浏览器API,另一种是借助第三方库,如`ZeroClipboard`。 首先,我们来看看如何...

    js实现点击后将文字或图片复制到剪贴板的方法

    因此,实际应用中应该对复制的数据进行适当的清理和转义处理,确保用户粘贴到剪贴板的内容是安全的。 综上所述,通过JavaScript实现复制文字或图片到剪贴板的功能,可以根据实际的浏览器兼容性需求和项目的技术栈来...

    js 复制粘贴功能

    **一、JavaScript基础及复制粘贴功能** 1. **DOM操作**:在JavaScript中,我们可以通过Document Object Model (DOM) API来操作HTML元素。要实现复制功能,首先需要选中用户想要复制的文本,这通常通过`document....

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

    要实现将input或textarea中的内容复制到粘贴板,我们可以使用JavaScript来编写相应的代码。下面将详细介绍这一功能的实现方法。 首先,我们需要创建一个函数,该函数能够接收一个DOM元素作为参数,这个元素可以是一...

    JS 实现复制粘贴

    本篇文章将详细探讨如何使用`clipboard.js`来实现在网页上的复制粘贴功能,以及相关知识点。 首先,我们需要理解浏览器的安全限制。出于安全考虑,浏览器对直接操作剪贴板的功能进行了限制,不允许JavaScript直接...

    用JS实现右键的复制,拈帖和剪切功能

    ### 使用JavaScript实现右键的复制、粘贴和剪切功能 #### 一、背景介绍 在Web开发过程中,有时我们需要模拟浏览器自带的右键菜单中的复制(Copy)、粘贴(Paste)以及剪切(Cut)功能。这不仅能够增强用户体验,还...

    手机移动端 js复制粘贴.zip

    综上所述,"手机移动端 js复制粘贴.zip"提供的资源可以帮助开发者理解和实现移动端JavaScript的复制粘贴功能,确保在各种环境下都有良好的用户体验。通过学习和实践,开发者可以提升其在移动Web开发中的技能,创建...

    JavaScript实现复制内容到粘贴板代码_.docx

    在JavaScript中,复制内容到剪贴板的操作是前端开发中常见的功能,比如用户在网页上点击复制按钮将文本信息快速存入系统粘贴板。在本文中,我们将深入探讨如何利用JavaScript实现这一功能,以及涉及的安全问题。 ...

    js兼容chrome、firefox复制、粘贴

    首先,我们来看一下为什么复制粘贴在不同浏览器间会有兼容性问题。这是因为在JavaScript中,直接操作剪贴板的功能受到浏览器的安全限制,以防止恶意代码窃取用户数据。Chrome和Firefox对剪贴板API的实现存在差异,...

    点击按钮复制功能

    总的来说,"点击按钮复制功能"的实现涉及到JavaScript事件处理、DOM操作、浏览器API的使用,以及针对不同平台的适配。理解并掌握这些知识点对于提升用户界面的易用性和开发效率至关重要。在实际开发中,开发者还需要...

    ZeroClipboard 复制与粘贴

    4. **设置复制内容**:将需要复制的文本内容赋值给ZeroClipboard实例,这样用户点击后就能将指定文本复制到剪贴板: ```javascript client.setText('这里是需要复制的文本'); ``` 5. **关联HTML元素**:为了使...

    两种复制按钮实现复制功能

    本篇将深入探讨两种常见的JavaScript(js)实现复制功能的方法。 首先,我们来看第一种方法,基于`clipboard` API的实现。现代浏览器提供了`navigator.clipboard`接口,它允许JavaScript直接读取和写入剪贴板内容。...

Global site tag (gtag.js) - Google Analytics