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>

 

你可能感兴趣的:(dom)