js插件达成剪切web前端,js没有供给Flash没有要求正视任何JS库完结公文复制与分割

By admin in web前端 on 2019年7月2日

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下

摘要:

我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js。

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>copyimg</title> 

  <style type="text/css"> 
    #box{ width:200px; height:200px; border:1px solid #ddd; } 
  </style> 

</head> 

<script language="JavaScript"> 


</script> 

<body> 
<h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1> 
<hr /> 
<div><input type="text" id="testInput" placeholder="截屏后粘贴到输入框中" size="30" /></div> 
<script type="text/javascript"> 
  (function(){ 
    var imgReader = function( item ){ 
      var blob = item.getAsFile(), 
          reader = new FileReader(); 

      reader.onload = function( e ){ 
        var img = new Image(); 

        img.src = e.target.result; 

        document.body.appendChild( img ); 
      }; 

      reader.readAsDataURL( blob ); 
    }; 
    document.getElementById( 'testInput' ).addEventListener( 'paste', function( e ){ 
      var clipboardData = e.clipboardData, 
          i = 0, 
          items, item, types; 

      if( clipboardData ){ 
        items = clipboardData.items; 

        if( !items ){ 
          return; 
        } 

        item = items[0]; 
        types = clipboardData.types || []; 

        for( ; i < types.length; i++ ){ 
          if( types[i] === 'Files' ){ 
            item = items[i]; 
            break; 
          } 
        } 

        if( item && item.kind === 'file' && item.type.match(/^image\//i) ){ 
          imgReader( item ); 
        } 
      } 
    }); 
  })(); 
</script> 

</body> 
</html> 

最近做了一个项目,其中有这样一需求:实现一个点击按钮复制链接的功能,通过网上找相关资料,找到了几个插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过js来实现复制剪切呢?

运行效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

地址:

 web前端 1

您可能感兴趣的文章:

  • Clipboard.js
    无需Flash的JavaScript复制粘贴库
  • javascript复制粘贴与clipboardData的使用
  • JS基于clipBoard.js插件实现剪切、复制、粘贴
  • js 剪切板的用法(clipboardData.setData)与js
    match函数介绍
  • 使用clipboard.js实现复制功能的示例代码
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
  • clipboard.js在移动端复制失败的解决方法

方法:

HTML
首先加载本地clipboard.js文件。

复制

<script src="clipboard.min.js"></script> 
var copy = new clipBoard(document.getElementById('data'), {
beforeCopy: function() {
},
copy: function() {
return document.getElementById('data').value;
},
afterCopy: function() {
}
}); 

然后就是在body中加上要复制或剪切的文本域内容以及按钮。

剪切

<input id="foo" value="//www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功!">复制</button> 
var cut = new clipBoard(document.getElementById('data'), {
beforeCut: function() {
},
Cut: function() {
return document.getElementById('data').value;
},
afterCut: function() {
}
});

这里,我们使用了HTML5的data-属性,用来定位复制对象目标,它指向了文本域#foo,说明复制的是#foo中的value内容,aria-label属性定义了复制成功后的信息,用来提示复制结果信息。
还有个属性data-clipboard-action,它定义当前操作是复制还是剪切,默认是复制,当data-clipboard-action=”cut”,这时,点击按钮将会剪切文本,跟WORD操作一样。当然,剪切操作仅适用于text和textarea。
我们也可以不需要input和textarea等元素内容作为复制对象,我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上,点击按钮就可以复制到ata-clipboard-text对应的内容。

粘贴

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功!">复制</button> 
var paste = new clipBoard(document.getElementById('data'), {
beforePaste: function() {
},
paste: function() {
return document.getElementById('data').value;
},
afterPaste: function() {
}
});

Javascript 将以下一句代码加入到</body>前的<script>里,保存打开浏览,点击按钮即可复制。

您可能感兴趣的文章:

  • Clipboard.js
    无需Flash的JavaScript复制粘贴库
  • javascript复制粘贴与clipboardData的使用
  • js 剪切板的用法(clipboardData.setData)与js
    match函数介绍
  • 使用clipboard.js实现复制功能的示例代码
  • js利用clipboardData实现截屏粘贴功能
  • clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
  • web前端,clipboard.js在移动端复制失败的解决方法
new Clipboard('.btn'); 

当然我们可以再进一步处理,比如当复制完成后,提示复制成功信息更友好些,只要执行以下代码即可:

var clipboard = new Clipboard('.btn'); 

clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 

 e.clearSelection(); 
}); 

以上就是,不需要flash,不依赖任何其他js库实现文本复制与剪切实现过程,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  • Clipboard.js
    无需Flash的JavaScript复制粘贴库
  • javascript复制粘贴与clipboardData的使用
  • JS基于clipBoard.js插件实现剪切、复制、粘贴
  • js 剪切板的用法(clipboardData.setData)与js
    match函数介绍
  • 使用clipboard.js实现复制功能的示例代码
  • js利用clipboardData实现截屏粘贴功能
  • clipboard.js在移动端复制失败的解决方法

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 澳门新葡亰官网app 版权所有