技术控

    今日:126| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 原生JavaScript实现复制/粘贴

[复制链接]
少年丶轻狂 发表于 2016-10-4 12:26:05
164 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在IE7及其以下版本浏览器中,由于不具备直接访问剪贴板的能力,开发者只能借助于flash插件来实现这一功能。
  而现在不部分现在浏览器支持剪贴板功能,Mac和iOS上的Safari除外。但是不同浏览器的支持程度不尽相同,而且一些功能并不完整或存在缺陷,需要考虑的兼容性问题较多。用户必须通过点击鼠标或按键的方式来主动触发,脚本并不能随时操纵剪贴板。
  下面总结一下剪贴板的JavaScript语法。
  一. 剪贴板事件

  
       
  • beforecopy :在发生复制操作前触发;   
  • copy :在发生复制操作的时候触发;   
  • beforecut :在发生剪切操作前触发;   
  • cut :在发生剪切操作的时候触发;   
  • beforepaste :在发生粘贴操作前触发;   
  • paste :在发生粘贴操作的时候触发。  
  在实际的事件发生之前,通过beforecopy、beforecut和beforepaste事件,可以在向剪贴板发送数据,或者从剪贴板取得数据之前修改数据。
  二. 访问剪贴板数据:clipboardData对象

   要访问剪贴板中的数据,可以通过 clipboardData 对象:
  
       
  • 在IE中,clipboardData对象是window对象的属性;   
  • 而在Chrome、Safari和Firefox 4+中,clipboardData对象是相应event对象的属性。  
   但是,在Chrome、Safari和Firefox 4+中,只有在处理剪贴板事件期间,clipboardData对象才有效,这是为了防止对剪贴板的未授权访问;在IE中,则可以随时访问clipboardData对象。为了确保跨浏览器兼容, 最好只在发生剪贴板事件期间使用clipboardData对象
  2.1 clipboardData对象的方法:

  
       
  • getData()   
  • setData()   
  • clearData()  
  2.1.1 getData()

  getData()方法用于从剪贴板中获取数据,它接收一个参数,即要取得的数据格式。
  
       
  • 在IE中,有两种数据格式:”text”和”URL”。   
  • 在Chrome、Safari和Firefox 4+中,这个参数是一种MIME类型。不过,可以用”text”代表”text/plain”。  
  [code]//获取剪贴板数据方法
function getClipboardText(event){
    var clipboardData = event.clipboardData || window.clipboardData;
    return clipboardData.getData("text");
};[/code]  2.1.2 setData()

  setData()方法的第一个参数也是数据类型,第二个参数是要放在剪贴板中的文字。
  对于第一个参数,IE照样是支持”text”和”URL”,而在Chrome、Safari中,仍然支持MIME类型。但是与getData()方法不同的是,在Chrome、Safari中的setData()方法不能识别”text”类型。
  在成功将文本放到剪贴板中后,该方法会返回true,否则返回false。
  [code]//设置剪贴板数据
function setClipboardText(event, value){
    if(event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    }else if(window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
};[/code]  2.2 clipboardData对象的属性:

              属性     类型     说明                   dropEffect     String     默认是 none。             effectAllowed     String     默认是 uninitialized。             Files     FileList     粘贴操作为空List。             items     DataTransferItemList     剪切板中的各项数据。             types     Array     剪切板中的数据类型。           2.2.1 items属性:

  items是一个DataTransferItemList对象,自然里面都是DataTransferItem类型的数据了。
  属性

  items的DataTransferItem有两个属性 kind 和 type:
              属性     说明                   kind     一般为string或者file。             type     具体的数据类型,例如具体是哪种类型字符串或者哪种类型的文件,即MIME-Type。           方法

              方法     参数     说明                   getAsFile     空     如果kind是file,可以用该方法获取到文件             getAsString     回调函数     如果kind是string,可以用该方法获取到字符串,字符串需要用回调函数得到,回调函数的第一个参数就是剪切板中的字符串           2.2.2 types属性:

  一般types中常见的值有text/plain、text/html、Files。
              值     说明                   text/plain     普通字符串。             text/html     带有样式的html。             Files     文件(例如剪切板中的数据)。           [code]

document.querySelector("#input").addEventListener("paste", function(e) {
    var clipboardData = e.clipboardData || window.clipboardData,
        i = 0,
        items,
        item,
        types;

    if( clipboardData ) {
        items = clipboardData.items;
        if( !items ) {
            return;
        }
        item = items[0];

        // 保存在剪贴板中的数据类型
        types = clipboardData.types || [];
        for(i = 0; i < types.length; i++ ) {
            if( types === 'Files' ) {
                item = items;
                break;
            }
        }

        // 判断是否为图片数据
        if( item && item.kind === 'file' && item.type.match(/^image\//i) ) {
            alert("This is an image.");
        }
    }
});[/code]  2.3 clipboardData对象的兼容性

   clipboardData对象的兼容性如下: http://caniuse.com/#search=Clipboard
   
原生JavaScript实现复制/粘贴-1 (flash插件,浏览器,Firefox,Chrome,window)

  三. 复制文本到剪贴板:document.execCommand()

  当文档对象被转换为设计模式的时候(选中,设置contentEditable等),文档对象提供了一个execCommand方法,通过给这这个方法传递参数命令可以操作可编辑区域的内容。这个方法的命令大多数是对文档选中区域的操作 (如bold, italics等),通过执行execCommand 方法可以对当前活动元素进行很多操作。
  3.1 语法:

  [code]bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)[/code]  参数如下:
  
       
  • aCommandName : 命令的名称,如”cut”、”copy”、”paste”等 命令 。   
  • aShowDefaultUI : 否展示用户界面,默认为false。Mozilla没有实现。   
  • aValueArgument : 一些命令需要一些额外的参数值(如insertimage需要提供这个image的url)。默认为null。  
  对于复制文本到剪切板,用到的方法是:
  [code]document.execCommand("copy", "false", null);[/code]   在调用之前,可以使用 document.queryCommandSupported("copy"); 或 document.queryCommandEnabled("copy"); 方法(这两个方法功能相同)来检测浏览器是否支持复制命令。
  需要注意的是,Chrome 虽然支持复制命令的,但在 Chorme 中这两个方法都会返回 false 值。检测 document.execCommand 方法是否存在也是一个判断方法,但更好的做法是将 document.execCommand(“copy”) 调用放在 try-catch 块内。
  [code]// 选中 #myEle 标签中的文本
var myEle = document.getElementById('#myEle'),
    range = document.createRange();

range.selectNode(myEle);
window.getSelection().addRange(range);

try {
    if(document.execCommand) {
        // 复制选中的文字到剪贴板
        document.execCommand("copy", "false", null);
    }
} catch {
    // 不支持复制命令
}[/code]  应用实例:将剪切板中的图片资源显示到页面上

  [code]


// 将图片资源显示到页面中
function showImage(imageData) {
    var reader = new FileReader();
    reader.onload = function(e){
        var img = new Image();
        img.src = e.target.result;
        document.body.appendChild(img);
    };
    // 读取图片文件
    reader.readAsDataURL(imageData);
}

document.querySelector("#input").addEventListener("paste", function(e){
    var clipboardData = e.clipboardData,
        items,
        item,
        types;

    if(clipboardData){
        items = clipboardData.items;
        if(!items){
            return;
        }
        item = items[0];
        // 保存在剪贴板中的数据类型
        types = clipboardData.types || [];
        for(var i = 0; i < types.length; i++ ){
            if(types === "Files"){
                item = items;
                break;
            }
        }
        // 判断是否为图片数据
        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
            var blob = item.getAsFile();
            showImage(blob);
        }
    }
});[/code]  效果如下:
友荐云推荐




上一篇:Classic Emacs editor gets a new-school makeover
下一篇:Avoid ORDER BY in SQL Server views
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

恨迟诀誓沒再 发表于 2016-10-4 15:35:22
星期二的帖子好无聊啊!
回复 支持 反对

使用道具 举报

3wsite 发表于 2016-10-4 16:17:06
今年楼主不送礼,送礼就给楼下的!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表