jquery 点击复制指定的文本 封装函数多个调用

https://www.4s5.cn/archives/903.html这篇文章中，我仔细的讲解了点击复制，但是后面我的需求改变了！

我需要多个点击，并且指定的元素都不同！

所以边需要封装函数才行！

封装后的代码

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 弹窗提示
  });
}

配合了bootstrap的模态弹窗！

可以将这个函数保存到你的 JavaScript 文件中，并在需要的地方调用，例如：

copyToClipboard('copyBtn', 'inputToken');

代码修复

上面的代码，绑定了点击事件，但是在我引用的时候，我思考了一下，觉得有些东西没必要，于是删减了函数

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 弹窗提示
}

这个函数，只需要填入三个参数：

指定复制元素框的内容

不存在元素框时，则复制第二个参数

复制成功后，提示的内容，可以不要

引入列子

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

我真不太会前端，所以写得不好的地方，多多原谅！