Sao chép đầu ra của một biến JavaScript vào khay nhớ tạm

Tôi không có kiến ​​thức về JavaScript, nhưng tôi đã cố gắng ghép mã này lại với nhau bằng cách sử dụng các bit và chốt từ các câu trả lời Stack Overflow khác nhau. Nó hoạt động tốt và nó xuất ra một mảng tất cả các hộp kiểm đã chọn trong tài liệu thông qua một hộp cảnh báo.

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  return checkbx;
}

Và để gọi nó, tôi sử dụng:

<button id="btn_test" type="button" >Check</button>
<script>
    document.getElementById('btn_test').onclick = function() {
        var checkedBoxes = getSelectedCheckboxes("my_id");
        alert(checkedBoxes);
    }
</script>

Bây giờ tôi muốn sửa đổi nó để khi tôi nhấp vào btn_testnút, mảng đầu ra checkbxđược sao chép vào khay nhớ tạm. Tôi đã thử thêm:

checkbx = document.execCommand("copy");

hoặc là

checkbx.execCommand("copy");

ở cuối hàm và sau đó gọi nó như:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('my_id')">Check</button>

Nhưng nó không hoạt động. Không có dữ liệu nào được sao chép vào khay nhớ tạm.

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    // to avoid breaking orgain page when copying more words
    // cant copy when adding below this code
    // dummy.style.display = 'none'
    document.body.appendChild(dummy);
    //Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('hello world')
copyToClipboard('hello\nworld')

Được rồi, tôi đã tìm được chút thời gian và làm theo gợi ý của Teemu và tôi đã có thể có được chính xác những gì mình muốn.

Vì vậy, đây là mã cuối cùng cho bất kỳ ai có thể quan tâm. Để làm rõ, mã này nhận tất cả các hộp kiểm đã chọn của một ID nhất định, xuất chúng trong một mảng, có tên ở đây checkbx, rồi sao chép tên duy nhất của chúng vào khay nhớ tạm.

Hàm JavaScript:

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  checkbx.toString();

  // Create a dummy input to copy the string array inside it
  var dummy = document.createElement("input");

  // Add it to the document
  document.body.appendChild(dummy);

  // Set its ID
  dummy.setAttribute("id", "dummy_id");

  // Output the array into it
  document.getElementById("dummy_id").value=checkbx;

  // Select it
  dummy.select();

  // Copy its contents
  document.execCommand("copy");

  // Remove it as its not needed anymore
  document.body.removeChild(dummy);
}

Và lệnh gọi HTML của nó:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>

Đối với mục đích chung là sao chép bất kỳ văn bản nào vào khay nhớ tạm, tôi đã viết hàm sau:

function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

Giá trị của tham số được chèn vào giá trị của một tham số mới được tạo <textarea>, sau đó được chọn, giá trị của nó được sao chép vào khay nhớ tạm và sau đó nó bị xóa khỏi tài liệu.

Rất hữu dụng. Tôi đã sửa đổi nó để sao chép một giá trị biến JavaScript vào khay nhớ tạm:

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

Khi bạn cần sao chép một biến vào khay nhớ tạm trong bảng điều khiển dành cho nhà phát triển Chrome, bạn có thể chỉ cần sử dụng copy()lệnh.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#copyobject

Tôi đã quản lý để sao chép văn bản vào khay nhớ tạm ( mà không hiển thị bất kỳ hộp văn bản nào ) bằng cách thêm một phần tử ẩn input vào body, tức là:

 function copy(txt){
  var cb = document.getElementById("cb");
  cb.value = txt;
  cb.style.display='block';
  cb.select();
  document.execCommand('copy');
  cb.style.display='none';
 }

<button onclick="copy('Hello Clipboard!')"> copy </button>
<input id="cb" type="text" hidden>

Vào thời điểm viết bài, việc thiết lập display:nonephần tử không hoạt động với tôi. Đặt chiều rộng và chiều cao của phần tử thành 0 cũng không hoạt động. Vì vậy, phần tử phải có ít nhất 1pxchiều rộng để phần tử này hoạt động.

Ví dụ sau hoạt động trong Chrome và Firefox:

    const str = 'Copy me';
    const el = document.createElement("input");
    // Does not work:
    // dummy.style.display = "none";
    el.style.height = '0px';
    // Does not work:
    // el.style.width = '0px';
    el.style.width = '1px';
    document.body.appendChild(el);
    el.value = str;
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);

Tôi muốn nói thêm rằng tôi có thể hiểu lý do tại sao các trình duyệt đang cố gắng ngăn chặn phương pháp hackish này. Tốt hơn là hiển thị công khai nội dung bạn sẽ sao chép vào trình duyệt của người dùng. Nhưng đôi khi có những yêu cầu về thiết kế, chúng tôi không thể thay đổi.

Tôi chỉ muốn thêm, nếu ai đó muốn sao chép hai đầu vào khác nhau vào khay nhớ tạm. Tôi cũng đã sử dụng kỹ thuật đặt nó vào một biến sau đó đặt văn bản của biến từ hai đầu vào vào một vùng văn bản.

Lưu ý: mã dưới đây là của một người dùng hỏi cách sao chép nhiều đầu vào của người dùng vào khay nhớ tạm. Tôi chỉ sửa nó để hoạt động chính xác. Vì vậy, hãy mong đợi một số kiểu cũ như sử dụng varthay thế cho lethoặc const. Tôi cũng khuyên bạn nên sử dụng addEventListenercho nút.

    function doCopy() {

        try{
            var unique = document.querySelectorAll('.unique');
            var msg ="";

            unique.forEach(function (unique) {
                msg+=unique.value;
            });

            var temp =document.createElement("textarea");
            var tempMsg = document.createTextNode(msg);
            temp.appendChild(tempMsg);

            document.body.appendChild(temp);
            temp.select();
            document.execCommand("copy");
            document.body.removeChild(temp);
            console.log("Success!")


        }
        catch(err) {

            console.log("There was an error copying");
        }
    }

<input type="text" class="unique" size="9" value="SESA / D-ID:" readonly/>
<input type="text" class="unique" size="18" value="">
<button id="copybtn" onclick="doCopy()"> Copy to clipboard </button>

Ngày nay, có một API (ish) mới để làm điều này trực tiếp. Nó chỉ hoạt động trên các trình duyệt hiện đại và trên HTTPS (và localhost). Không được hỗ trợ bởi IE11.

IE11 có API riêng.

Và cách giải quyết trong câu trả lời được chấp nhận có thể được sử dụng cho các máy chủ không an toàn.

function copyToClipboard (text) {
  if (navigator.clipboard) { // default: modern asynchronous API
    return navigator.clipboard.writeText(text);
  } else if (window.clipboardData && window.clipboardData.setData) {     // for IE11
    window.clipboardData.setData('Text', text);
    return Promise.resolve();
  } else {
    // workaround: create dummy input
    const input = h('input', { type: 'text' });
    input.value = text;
    document.body.append(input);
    input.focus();
    input.select();
    document.execCommand('copy');
    input.remove();
    return Promise.resolve();
  }
}

Lưu ý: nó sử dụng Hyperscript để tạo phần tử đầu vào (nhưng phải dễ điều chỉnh)

Không cần phải ẩn đầu vào vì nó được thêm vào và xóa rất nhanh. Ngoài ra khi bị ẩn (thậm chí sử dụng một số phương pháp thông minh) một số trình duyệt sẽ phát hiện ra nó và ngăn chặn hoạt động sao chép.