摘要:Javascript原生有一些事件:copy、paste、cut,这些事件可以作用的目标元素:  能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-用JS实现复制内容到剪切板,兼容PC和手机端,支持SAFARI浏览器的方法

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

Javascript原生有一些事件:copy、paste、cut,

这些事件可以作用的目标元素:

  能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body>

<p id="cardList">

  <p class="btn">点击我,复制我</p>

</p>

<script type="text/javascript">

  function copy(str){

    var save = function (e){

      e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象

      e.preventDefault();//阻止默认行为

    }

    document.addEventListener('copy',save);

    document.execCommand("copy");//使文档处于可编辑状态,否则无效

  }

  document.getElementById('cardList').addEventListener('click',function(ev){

    copy(ev.target.innerText)

  })

</script>

使用jQuery中的方法监听用户的剪切、复制、粘贴的行为:

$("#cut").on("cut",function(){

   alert("剪切");

});

$("#copy").on("copy",function(){

   alert("复制");

});

$("#paste").on("paste",function(){

   alert("粘贴");

});

这些行为包括使用键盘的ctrl + c操作,或者右击鼠标—>复制等操作。

Evevt.clipboardData 对象

clipboardData是JavaScript剪切板对象,该对象提供了3个常用方法:

  clearData():  clipboardData对象从剪切板删除一种或多种数据格式(一个参数:数据类型)

  getData():  clipboardData对象从剪切板获取指定格式的数据(一个参数:数据类型)

  setData():  clipboardData对象赋予指定格式的数据(两个参数:数据类型,要赋予的值)

  *数据类型一般为“"text/plain" ”

Evevt.clipboardData 对象兼容性问题

经过尝试,clipboardData对象内兼容大部分px浏览器,像chrome,firefox、ie等,但是在手机端兼容性不是很好,

  目前clipboardData在ios上的safari浏览器无效,为解决移动端这个问题,我们引用一个js插件——clipboard.js

  clipboard.js依赖于HTML5推出的Selection API和execCommand API

使用方法:

  首先在页面中引入

<script src="clipboard.min.js"></script>

  使用clipboard.js的自定义属性

<!--使用data-clipboard-target属性指定被复制的标签-->

<!--使用data-clipboard-action属性指定一些操作,copy(复制),cut(剪切)-->

<!--注意:cut 操作仅适用于<textarea>和<input>-->

<p style="margin:2em">

  <textarea id="id_text"></textarea>

  <button type="button" id="id_copy"

    data-clipboard-target="#id_text"

    data-clipboard-action="copy">点击复制

  </button>

</p>

<script type="text/javascript">

 var clipboard = new Clipboard("#id_copy");

 clipboard.on("success",function (element) {//复制成功的回调

   console.info("复制成功,复制内容: " + element.text);

 });

 clipboard.on("error",function (element) {//复制失败的回调

   console.info(element);

 });

</script>

  高级用法:

//清理Clipboard对象

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

clipboard.destroy();

JS实现各种复制到剪贴板:

1、实现点击按钮,复制文本框中的的内容

<script type="text/javascript">

function copyyel2()

{

var yel2=document.getElementById("biao1");

yel2.select(); // 选择对象

document.execCommand("Copy"); // 执行浏览器复制命令

alert("已复制好,可贴粘。");

}

</script>

<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>

<input type="button" onClick="copyyel2()" value="点击复制代码" />

2、复制专题地址和 url 地址,传给 QQ/MSN 上的好友

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Js复制代码</title>

</head>

<body>

<p>

<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给QQ/MSN上的好友">

<script language="javascript">

function copyToClipBoard(){

var clipBoardContent="";

clipBoardContent+=document.title;

clipBoardContent+="";

clipBoardContent+=this.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");

}

</script>

3、直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">

<script language="javascript">

function copyUrl()

{

var clipBoardContent=this.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功!");

}

</script>

4、点击文本框时,复制文本框里面的内容

<input onclick="oCopy(this)" value="你好.要copy的内容!">

<script language="javascript">

function oCopy(obj){

obj.select();

js=obj.createTextRange();

js.execCommand("Copy")

alert("复制成功!");

}

</script>

5、复制文本框或者隐藏域中的内容

<script language="javascript">

function CopyUrl(target){

target.value=myimg.value;

target.select();

js=myimg.createTextRange();

js.execCommand("Copy");

alert("复制成功!");

}

function AddImg(target){

target.value="[IMG]"+myimg.value+"[/ img]";

target.select();

js=target.createTextRange();

js.execCommand("Copy");

alert("复制成功!");

}

</script>

6.复制 span 标记中的内容

<script type="text/javascript">

</script>

<br />

<br />

<script type="text/javascript">function copyText(obj)

{

var rng = document.body.createTextRange();

rng.moveToElementText(obj);

rng.scrollIntoView();

rng.select();

rng.execCommand("Copy");

rng.collapse(false);

alert("复制成功!");

}

</script>

7.浏览器兼容  copyToClipboard("拷贝内容")

function copyToClipboard(txt) {

      if (window.clipboardData) {

        window.clipboardData.clearData();

        clipboardData.setData("Text", txt);

        alert("复制成功!");

  

      } else if (navigator.userAgent.indexOf("Opera") != -1) {

        window.location = txt;

      } else if (window.netscape) {

        try {

          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

        } catch (e) {

          alert("被浏览器拒绝!/n请在浏览器地址栏输入'about:config'并回车/n然后将 'signed.applets.codebase_principal_support'设置为'true'");

        }

        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

        if (!clip)

          return;

        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

        if (!trans)

          return;

        trans.addDataFlavor("text/unicode");

        var str = new Object();

        var len = new Object();

        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

        var copytext = txt;

        str.data = copytext;

        trans.setTransferData("text/unicode", str, copytext.length * 2);

        var clipid = Components.interfaces.nsIClipboard;

        if (!clip)

          return false;

        clip.setData(trans, null, clipid.kGlobalClipboard);

        alert("复制成功!");

      }

    }

8.兼容各大浏览器的复制代码(结合ZeroClipboard.js)

<html>

<head>

<title>Zero Clipboard Test</title>

<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">

 var clip = null;

 function $(id) { return document.getElementById(id); }

 function init() {

     clip = new ZeroClipboard.Client();

     clip.setHandCursor(true);    

     clip.addEventListener('mouseOver', function (client) {

  // update the text on mouse over

  clip.setText( $('fe_text').value );

     });

     clip.addEventListener('complete', function (client, text) {

  //debugstr("Copied text to clipboard: " + text );

  alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");

     });

     clip.glue('clip_button', 'clip_container' );

 }

</script>

</head>

<body onLoad="init()">

<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >

<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>

</body>

</html

Javascript原生有一些事件:copy、paste、cut,

这些事件可以作用的目标元素:

  能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body>

<p id="cardList">

  <p class="btn">点击我,复制我</p>

</p>

<script type="text/javascript">

  function copy(str){

    var save = function (e){

      e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象

      e.preventDefault();//阻止默认行为

    }

    document.addEventListener('copy',save);

    document.execCommand("copy");//使文档处于可编辑状态,否则无效

  }

  document.getElementById('cardList').addEventListener('click',function(ev){

    copy(ev.target.innerText)

  })

</script>

使用jQuery中的方法监听用户的剪切、复制、粘贴的行为:

$("#cut").on("cut",function(){

   alert("剪切");

});

$("#copy").on("copy",function(){

   alert("复制");

});

$("#paste").on("paste",function(){

   alert("粘贴");

});

这些行为包括使用键盘的ctrl + c操作,或者右击鼠标—>复制等操作。

Evevt.clipboardData 对象

clipboardData是JavaScript剪切板对象,该对象提供了3个常用方法:

  clearData():  clipboardData对象从剪切板删除一种或多种数据格式(一个参数:数据类型)

  getData():  clipboardData对象从剪切板获取指定格式的数据(一个参数:数据类型)

  setData():  clipboardData对象赋予指定格式的数据(两个参数:数据类型,要赋予的值)

  *数据类型一般为“"text/plain" ”

Evevt.clipboardData 对象兼容性问题

经过尝试,clipboardData对象内兼容大部分px浏览器,像chrome,firefox、ie等,但是在手机端兼容性不是很好,

  目前clipboardData在ios上的safari浏览器无效,为解决移动端这个问题,我们引用一个js插件——clipboard.js

  clipboard.js依赖于HTML5推出的Selection API和execCommand API

使用方法:

  首先在页面中引入

<script src="clipboard.min.js"></script>

  使用clipboard.js的自定义属性

<!--使用data-clipboard-target属性指定被复制的标签-->

<!--使用data-clipboard-action属性指定一些操作,copy(复制),cut(剪切)-->

<!--注意:cut 操作仅适用于<textarea>和<input>-->

<p style="margin:2em">

  <textarea id="id_text"></textarea>

  <button type="button" id="id_copy"

    data-clipboard-target="#id_text"

    data-clipboard-action="copy">点击复制

  </button>

</p>

<script type="text/javascript">

 var clipboard = new Clipboard("#id_copy");

 clipboard.on("success",function (element) {//复制成功的回调

   console.info("复制成功,复制内容: " + element.text);

 });

 clipboard.on("error",function (element) {//复制失败的回调

   console.info(element);

 });

</script>

  高级用法:

//清理Clipboard对象

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

clipboard.destroy();

JS实现各种复制到剪贴板:

1、实现点击按钮,复制文本框中的的内容

<script type="text/javascript">

function copyyel2()

{

var yel2=document.getElementById("biao1");

yel2.select(); // 选择对象

document.execCommand("Copy"); // 执行浏览器复制命令

alert("已复制好,可贴粘。");

}

</script>

<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>

<input type="button" onClick="copyyel2()" value="点击复制代码" />

2、复制专题地址和 url 地址,传给 QQ/MSN 上的好友

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>Js复制代码</title>

</head>

<body>

<p>

<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给QQ/MSN上的好友">

<script language="javascript">

function copyToClipBoard(){

var clipBoardContent="";

clipBoardContent+=document.title;

clipBoardContent+="";

clipBoardContent+=this.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");

}

</script>

3、直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">

<script language="javascript">

function copyUrl()

{

var clipBoardContent=this.location.href;

window.clipboardData.setData("Text",clipBoardContent);

alert("复制成功!");

}

</script>

4、点击文本框时,复制文本框里面的内容

<input onclick="oCopy(this)" value="你好.要copy的内容!">

<script language="javascript">

function oCopy(obj){

obj.select();

js=obj.createTextRange();

js.execCommand("Copy")

alert("复制成功!");

}

</script>

5、复制文本框或者隐藏域中的内容

<script language="javascript">

function CopyUrl(target){

target.value=myimg.value;

target.select();

js=myimg.createTextRange();

js.execCommand("Copy");

alert("复制成功!");

}

function AddImg(target){

target.value="[IMG]"+myimg.value+"[/ img]";

target.select();

js=target.createTextRange();

js.execCommand("Copy");

alert("复制成功!");

}

</script>

6.复制 span 标记中的内容

<script type="text/javascript">

</script>

<br />

<br />

<script type="text/javascript">function copyText(obj)

{

var rng = document.body.createTextRange();

rng.moveToElementText(obj);

rng.scrollIntoView();

rng.select();

rng.execCommand("Copy");

rng.collapse(false);

alert("复制成功!");

}

</script>

7.浏览器兼容  copyToClipboard("拷贝内容")

function copyToClipboard(txt) {

      if (window.clipboardData) {

        window.clipboardData.clearData();

        clipboardData.setData("Text", txt);

        alert("复制成功!");

  

      } else if (navigator.userAgent.indexOf("Opera") != -1) {

        window.location = txt;

      } else if (window.netscape) {

        try {

          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

        } catch (e) {

          alert("被浏览器拒绝!/n请在浏览器地址栏输入'about:config'并回车/n然后将 'signed.applets.codebase_principal_support'设置为'true'");

        }

        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);

        if (!clip)

          return;

        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);

        if (!trans)

          return;

        trans.addDataFlavor("text/unicode");

        var str = new Object();

        var len = new Object();

        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);

        var copytext = txt;

        str.data = copytext;

        trans.setTransferData("text/unicode", str, copytext.length * 2);

        var clipid = Components.interfaces.nsIClipboard;

        if (!clip)

          return false;

        clip.setData(trans, null, clipid.kGlobalClipboard);

        alert("复制成功!");

      }

    }

8.兼容各大浏览器的复制代码(结合ZeroClipboard.js)

<html>

<head>

<title>Zero Clipboard Test</title>

<script type="text/javascript" src="ZeroClipboard.js"></script>

<script language="JavaScript">

 var clip = null;

 function $(id) { return document.getElementById(id); }

 function init() {

     clip = new ZeroClipboard.Client();

     clip.setHandCursor(true);    

     clip.addEventListener('mouseOver', function (client) {

  // update the text on mouse over

  clip.setText( $('fe_text').value );

     });

     clip.addEventListener('complete', function (client, text) {

  //debugstr("Copied text to clipboard: " + text );

  alert("该地址已经复制,你可以使用Ctrl+V 粘贴。");

     });

     clip.glue('clip_button', 'clip_container' );

 }

</script>

</head>

<body onLoad="init()">

<input id="fe_text" cols=50 rows=5 value=复制内容文本1 >

<span id="clip_container"><span id="clip_button"><b>复制</b></span></span>

</body>

</html

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-用JS实现复制内容到剪切板,兼容PC和手机端,支持SAFARI浏览器的方法

全部内容,希望文章能够帮你解决

js实例教程-用JS实现复制内容到剪切板,兼容PC和手机端,支持SAFARI浏览器的方法

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过