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,请仔细保存好,泄露之后,需要修改请联系管理员!");
});
});
我真不太会前端,所以写得不好的地方,多多原谅!
我需要多个点击,并且指定的元素都不同!
所以边需要封装函数才行!
封装后的代码
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,请仔细保存好,泄露之后,需要修改请联系管理员!");
});
});
我真不太会前端,所以写得不好的地方,多多原谅!
新闻资讯 更多
- 【建站知识】查询nginx日志状态码大于400的请求并打印整行04-03
- 【建站知识】Python中的logger和handler到底是个什么?04-03
- 【建站知识】python3拉勾网爬虫之(您操作太频繁,请稍后访问)04-03
- 【建站知识】xpath 获取meta里的keywords及description的方法04-03
- 【建站知识】python向上取整以50为界04-03
- 【建站知识】scrapy xpath遇见乱码解决04-03
- 【建站知识】scrapy爬取后中文乱码,解决word转为html 时cp1252编码问题04-03
- 【建站知识】scrapy采集—爬取中文乱码,gb2312转为utf-804-03