ホームページ > 記事 > ウェブフロントエンド > javascript_javascriptスキルでのclipboardDataオブジェクトの使用法の詳細な説明
この記事の例では、JavaScript での ClipboardData オブジェクトの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
clipboardData オブジェクト。Web ページのクリップボードはこれまでのところ Text タイプのみを設定できる、つまりテキストのみをコピーできることに注意してください
clearData("Text") はペーストボードをクリアします
getData("Text") はペーストボードの値を読み取ります
setData("Text",val) はペーストボードの値を設定します
コピーする場合、本文の oncopy イベントがトリガーされ、Web ページ内のテキストのコピーは禁止されることに注意してください。
2d1789bf9acde6eb9df31b32e9130bc5
多くの要素には oncopy および onpaste イベントもあります
<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>
<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>
<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>