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,请仔细保存好,泄露之后,需要修改请联系管理员!");
  });
});
我真不太会前端,所以写得不好的地方,多多原谅!
猜你需要

豫ICP备2021026617号-1  豫公网安备:41172602000185   Copyright © 2021-2028 www.78moban.com/ All Rights Reserved

本站作品均来自互联网,转载目的在于传递更多信息,并不代表本站赞同其观点和对其真实性负责。如有侵犯您的版权,请联系 1565229909#qq.com(把#改成@),我们将立即处理。