首頁 >web前端 >js教程 >javascript中clipboardData物件用法詳解_javascript技巧

javascript中clipboardData物件用法詳解_javascript技巧

WBOY
WBOY原創
2016-05-16 15:59:311490瀏覽

本文實例講述了javascript中clipboardData物件用法。分享給大家供大家參考。具體分析如下:

clipboardData物件  ,注意網頁裡剪貼簿到現在只能設定Text類型,也就是只能複製文字
clearData("Text")清空黏貼簿
getData("Text")讀取黏貼簿的值
setData("Text",val)設定黏貼簿的值

當複製的時候body的oncopy事件被觸發,直接return false就是禁止複製,注意是不能複製網頁裡的文字了


很多元素也有oncopy,onpaste事件

1.複製文字到剪貼簿

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 function CopyLinkAddress() {
  clipboardData.setData("Text", "请复制网址到您的QQ:" + location.href);
  alert("复制成功!");
 }
 </script>
</head>
<body>
 <input type="button" value="复制网址" onclick="CopyLinkAddress()" />
</body>
</html>

2.禁止複製,和禁止貼上

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 function CopyLinkAddress() {
  clipboardData.setData("Text", "请复制网址到您的QQ:" + location.href);
  alert("复制成功!");
 }
 </script>
</head>
<!--<body oncopy="alert('禁止复制');return false;">-->
<body>
 <input type="button" value="复制网址" onclick="CopyLinkAddress()" />
 测试复制的文本<br />
 手机号码1:<input type="text" /><br />
 手机号码2:<input type="text" 
 onpaste="alert('禁止粘贴,必须手工录入!');return false;" />
</body>
</html>

3.clipboardData物件複製時新增來源

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <script type="text/javascript">
 function ModifyCopyData() {
  clipboardData.setData('Text',clipboardData.getData('Text') +
   '\r\n来自Pigeon网站' + location.href);
 }
 </script>
</head>
<!--不能直接在oncopy中调用ModifyCopyData函数
 需设定定时器,0.1秒后执行,这样就不再oncopy的执行调用堆栈上了
-->
<body oncopy="setTimeout('ModifyCopyData()',100)">
 脚本之家:www.jb51.net
</body>
</html>

希望本文所述對大家的C#程式設計有所幫助。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn