jquery clicks to copy the specified text and encapsulates multiple function calls

https://www.4s5.cn/archives/903.htmlIn this article, I explained click-to-copy in detail, but my needs changed later!

I need multiple clicks, and the specified elements are all different!

So the edge needs to encapsulate the function!

Encapsulated code

function copyToClipboard(btnId, inputId) {
  $('#' + btnId).on('click', function() {
    var text = $('#' + inputId).val();
    var $temp = $('<textarea>');
    $('body').append($temp);
    $temp.val(text).select();
    document.execCommand('copy');
    $temp.remove();
    $("#copyModal .modal-body").text("成功！");
    $('#copyModal').modal('show'); // 显示 Bootstrap 弹窗提示
  });
}

Modal pop-up window with bootstrap!

You can save this function to your JavaScript file and call it wherever needed, for example:

copyToClipboard('copyBtn', 'inputToken');

code fix

The above code is bound to the click event, but when I quoted it, I thought about it and felt that some things were unnecessary, so I deleted the function.

function copyToClipboard(inputId, backupText, message) {
    var text = $('#' + inputId).length > 0 ? $('#' + inputId).val() : backupText;
    var $temp = $('<textarea>');
    $('body').append($temp);
    $temp.val(text).select();
    document.execCommand('copy');
    $temp.remove();
    $("#copyModal .modal-body").text(message || "复制成功");
    $('#copyModal').modal('show'); // 显示 Bootstrap 弹窗提示
}

This function only needs to fill in three parameters:

Specifies the contents of the copied element box

When the element box does not exist, the second parameter is copied.

After the copy is successful, the content of the prompt is optional.

Introduce examples

$(document).ready(function() {
  $('#copyBtn').on('click', function() {
    copyToClipboard("inputToken",'',"成功复制TOKENS，请仔细保存好，泄露之后，需要修改请联系管理员！");
  });
});

I'm really not good at front-end, so I apologize for my poor writing!