• Javascript控制剪贴板大全


    看到UBB代码[ code ]视窗的时候会有个"复制到剪贴板"的功能.我觉得很好用.
    突然想到文件上传后,出现在"地址(路径)"位置的URL,给他加个复制的按钮吧.
    研究了一下原来的代码..
    定义函数

    程序代码
    1. function CopyText(obj) {   
    2.  ie = (document.all)? true:false  
    3.  if (ie){   
    4.   var rng = document.body.createTextRange(); //列出所有文本对象内容   
    5.   rng.moveToElementText(obj);//移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本   
    6.   rng.scrollIntoView();//scrollIntoView 将对象滚动到可见范围内,将其排列到   
    7. 窗口顶部或底部   
    8.   rng.select();//选择   
    9.   rng.execCommand("Copy");//复制   
    10.   rng.collapse(false);//不太明白..   
    11.  }   
    12. }   

    然后用

    程序代码
    <a href="javascript:CopyText(document.all.CODE_8223);">[ 复制代码到剪贴板 ]</a> </td></tr></table><div class="code_main" id="CODE_8223">需要复制的代码...</div>

    它主要是选中要复制的文本对象,然后用exeCommand("Copy")来复制.
    之后我照班了一个..结果发现<input type=text>里面的东西无法复制..只能选中外面的框..
    又在网上找了一些资料...终于有了答案.嘿嘿..
    ==========================================
    javascript Tip(1) 操作剪贴板
    javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器
    javascript可以使用window.clipboardData对象处理剪贴板内容
    保存到剪贴板的方法 setData(param1, param2)
    param1 :数据类型 text 或 URL等.
    param2 :数据内容

    从剪贴板读出数据的方法 getdata(param1)
    清空数据的方法 clearData(param1)

    下面是一个例子演示

    程序代码
    1.   
    2. <HTML>    
    3. <HEAD>    
    4. <TITLE>测试操作剪贴板</TITLE>    
    5. </HEAD>    
    6. <script>    
    7. function copyToClipboard()    
    8. {    
    9. var d=document.all("source").value;    
    10. window.clipboardData.setData('text', d);    
    11. }    
    12.   
    13. </script>    
    14. <BODY >    
    15.   
    16. <button onclick="copyToClipboard();">拷贝</button>    
    17. <input type="text" size=20 id="source" value="测试数据">    
    18. <br>    
    19. <button onclick="alert(window.clipboardData.getData('text'));">显示</button>    
    20. <button onclick="window.clipboardData.clearData('text');">清空</button>    
    21.   
    22.   
    23. </BODY>    
    24. </HTML>    
    25.   

    下面是另一个例子实现页面中选中字符,并拖拉到文本区功能
    注意其中的window.event.dataTransfer对象也可处理剪贴板内容,不过只能用在 drag-and-drop 操作中


    程序代码
    1. <HTML>    
    2. <HEAD>    
    3. <TITLE>测试操作剪贴板2</TITLE>    
    4. </HEAD>    
    5. <script>    
    6.   
    7. function transferDrop() {    
    8. windowwindow.event.srcElement.innerText = window.event.dataTransfer.getData("text");    
    9. window.event.returnValue = false;    
    10. }    
    11. function transferDrag() {    
    12. window.event.dataTransfer.dropEffect = 'move';    
    13. window.event.returnValue = false;    
    14. }    
    15.   
    16. </script>    
    17. <BODY    
    18.   
    19. <p id="mySource" ondragstart="window.event.dataTransfer.effectAllowed =    
    20. 'move';">选择我们并把我们拖到下面的textarea</p>    
    21.   
    22. <textarea id="myTarget" ondrop="transferDrop();"    
    23. ondragover="window.event.returnValue = false;" ondragenter="transferDrag();">    
    24. </textarea>    
    25.   
    26. </BODY>    
    27. </HTML>    

    ==============================
    发现用
    window.clipboardData.setData("text",value)
    window.clipboardData.getData("text")
    window.clipboardData.clearData("text")
    很容易控制剪贴板的内容了..
  • 相关阅读:
    jQuery入门和DOM对象
    jQuery事件
    基础,层次,选择器
    MarkDown快速入门(typora)
    source是读入环境配置文件的命令,不能读入vimrc
    vi中将tab键转化为空格
    django-rest-framework学习之Quickstart和Serializer--2017年4月10日至12日
    Flask-RESTful插件介绍--2017年4月7日
    python restful api 编程--2017年4月6日
    一个验证登录的程序:python编写flask架构restful风格--2017年4月6日
  • 原文地址:https://www.cnblogs.com/goody9807/p/1191254.html
Copyright © 2020-2023  润新知