详情页

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

时间:2023年10月23日

编辑:佚名

标题:jquery 点击复制指定的文本,这篇文章中,我仔细的讲解了点击复制,但是后面我的需求改变了!
我需要多个点击,并且指定的元素都不同!
所以边需要封装函数才行!
封装后的代码
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,请仔细保存好,泄露之后,需要修改请联系管理员!");
  });
});
我真不太会前端,所以写得不好的地方,多多原谅!
相关文章
猜你需要