DOM 클립보드

7118 단어 dom
우리는 커팅보드를 자주 사용합니다. 예를 들어 csdn의 사이트에는 복제 단추가 있습니다. 클릭하면 복제된 내용 아래에 한 줄의 내용이 있고 복제된 내용이 csdn에서 왔다는 것을 알립니다. 그리고 아래에는 관련 연결이 있습니다.
웹 페이지에 clipboardData 객체가 있는데 이 객체는 클립보드이며 다음 세 가지 함수를 사용할 수 있습니다.
1. getData("Text")는 클립보드에서 정보를 가져오는 값을 나타냅니다.
2. setData(“Text”,val).는 val의 값을 클립보드에 쓰는 것을 나타냅니다.
3. clearData("Text"), 클립보드 비우기
JS에서는 대소문자를 구분하고 다른 매개변수인 Text는 생략할 수 없습니다.
다음은 세 개의textarea를 만들고 각각ara1,ara2,ara3로 네 개의 단추를 배치한다. 각각 복사, 붙여넣기, 비우기, 작은 꼬리 복사이다.
복사를 누르면 아라1을 클립보드에 복사하고, 붙여넣기를 누르면 복사한 내용을 아라2에 기록합니다. 비울 때clearData 함수를 호출하고, 아라2에 붙여넣으면 null로 표시됩니다.
작은 꼬리 달기 버튼은 아라1의 내용을 아라3에 꼬리를 달고 붙이는 것이다.
<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>

좋은 웹페이지 즐겨찾기