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>

 

posted on 2013-05-20 14:09  天上星  阅读(427)  评论(0)  编辑  收藏  举报

导航