Button Copy text to Clipboard trong HTML với JavaScript JS

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 31/8/18.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,237
    Đã được thích:
    936
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Button Copy text to Clipboard trong HTML với JavaScript JS.

    Ấn nút copy sẽ copy hết dữ liệu mình muốn copy, sau khi xong bạn có thể ra paste ra ngoài giống như bạn chọn copy paste vậy đó.

    copy-javascript-ho-tro-tat-ca-cac-vien-ban.jpg

    Code javascript đã test qua ổn định mọi trình duyệt.

    Cách 1:
    Mã:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .tooltiptext
    {
        display: inline-block;
    }
    .tooltip {
        position: relative;
        display: inline-block;
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 140px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        margin-left: -75px;
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
    </style>
    </head>
    <body>
    
    <p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
    
    <input type="text" value="Hello World" id="myInput">
    
    <div class="tooltip">
    <button onclick="myFunction()" onmouseout="outFunc()">
      <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
      Copy text
      </button>
    </div>
    
    <p>The document.execCommand() method is not supported in IE8 and earlier.</p>
    
    <script>
    function myFunction() {
      var copyText = document.getElementById("myInput");
      copyText.select();
      document.execCommand("copy");
    
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copied: " + copyText.value;
    }
    
    function outFunc() {
      var tooltip = document.getElementById("myTooltip");
      tooltip.innerHTML = "Copy to clipboard";
    }
    </script>
    
    </body>
    </html>
    
    Cách 2:
    Mã:
    <button onclick="copy('noi dung copy')">Copy</button>
    <script>
    function copy(text) {
      document.body.insertAdjacentHTML("beforeend","<div id=\"copy\" contenteditable>"+text+"</div>")
      document.getElementById("copy").focus();
      document.execCommand("selectAll");
      document.execCommand("copy");
      document.getElementById("copy").remove();
    }
    </script>
    
     
    Cảm ơn đã xem bài:

    Button Copy text to Clipboard trong HTML với JavaScript JS

    danh sách diễn đàn rao vặt gov chất lượng
    Chỉnh sửa cuối: 31/8/18


Like và Share ủng hộ ITSEOVN