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
    Tham gia ngày:
    22/5/13
    Bài viết:
    5,007
    Đã được thích:
    1,219
    Đ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

    Chỉnh sửa cuối: 31/8/18
    admin, 31/8/18
    #1


Chủ để tương tự : Button Copy
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Button html5 css rhombus hình thoi, bầu dục cơ bản 9/9/20