zoukankan      html  css  js  c++  java
  • DOM剪切板

    我们常用到剪切板,在网页操作中,如,csdn 的网站,会有一个复制按钮,点击后,会在复制的内容下有一行内容,提示复制的内容来自csdn,并且下面会带有相关的连接。

    在网页中有个对象clipboardData,此对象就是剪切板,它有三个函数可进行操作:

    1. getData("Text"),表示从剪切板中获取信息,即有返回值

    2. setData(“Text”,val).表示把val的值写入剪切板中

    3. clearData("Text") ,清空剪切板

    JS中是区分大小写的,另其中的参数Text是不能省略的。

    以下是建立三个textarea,分别为ara1,ara2,ara3,放置四个按钮,分别为复制、粘贴、清空、带小尾巴复制。

    点击复制时会把ara1复制到剪切板,点击粘贴时会把复制的内容写到ara2中,清空时会调用clearData函数,再在ara2中粘贴,你会发现显示为null.

    带小尾巴按钮是把ara1中的内容并带个尾巴粘贴到ara3中。

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function copy() {
                var svalue = document.getElementById("ara1").value;
                alert(svalue);
                clipboardData.setData('Text', svalue);
             
          }
          function paste() {
              var svalue = clipboardData.getData('Text');
              document.getElementById("ara2").value = svalue;
          }
    
          function cleara() {
              clipboardData.clearData("Text");
          }
    
          function copywithtailtotextarea() {
              var svalue = document.getElementById("ara1").value;
              svalue = svalue + "本复制的内容网址:" + location.href;
              alert(svalue);
              clipboardData.setData("Text",svalue);
    
              document.getElementById("ara3").value = clipboardData.getData("Text");
          }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <textarea id="ara1" rows="10">
           testtesttesttest
           testtesttesttest
           testtesttesttesttest
                  
        </textarea>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
        <textarea id="ara2" rows="10">
           
                  
        </textarea>
        <br />
        <input type="button" value="复制" onclick="copy()"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="button" value="粘贴" onclick="paste()"/>
         <input type="button" value="清空粘贴板" onclick="cleara()"/>
         <input type="button" value="带小尾巴复制" onclick="copywithtailtotextarea()" />
         <textarea id="ara3"     rows="30">
         </textarea>
        </div>
        </form>
    </body>
    </html>
  • 相关阅读:
    关于Spring的destroy-method和scope="prototype"不能共存问题
    关于引入文件名字问题
    技术学习路
    web.xml文件配置
    性能测试中的TPS与HPS
    设计模式简介
    Cause of 400 Bad Request Errors
    vim使用技巧
    如何更好地利用Pmd、Findbugs和CheckStyle分析结果
    Java基础知识
  • 原文地址:https://www.cnblogs.com/yagzh2000/p/3088503.html
Copyright © 2011-2022 走看看