在 Javascript 中创建复制按钮 [英] Create copy button in Javascript
问题描述
您好，我是新的 Web 开发人员，我一直在从事一个项目.我在一个报价网站上工作.首先，您访问我的 CodePen 并访问我的项目.
请访问我的 CodePen 网站然后回答，否则您无法理解该问题，否则我将项目写在底部.https://codepen.io/Akash11166666/pen/JjRzqzp
正如您在我的笔中看到的，每个报价下都有许多复制按钮，但它们不起作用.虽然我尝试了很多 Javascript 但知道它们是有效的.
请记住，引号的
作为参考，我将提供我尝试过但不起作用的 Javascript.
Javascript(不起作用)
var buttons = document.getElementsByClassName('copystatus');for(让按钮的按钮){button.addEventListener('click', function() {让 statusElement = this.closest('.latestatus');让 textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;copyTextToClipboard(textToCopy);addCopyStatusAlert(this.parentNode);});}函数 copyTextToClipboard(text) {const copyText = document.createElement('textarea');copyText.style.position=绝对"；copyText.value = 文本；document.body.appendChild(copyText);copyText.select();document.execCommand('copy');document.body.removeChild(copyText);}函数 addCopyStatusAlert(元素){if (!element.getElementsByClassName('status-copy-alert').length) {let copyAlertElement = document.createElement('span');copyAlertElement.classList.add('status-copy-alert')let copyMessage = document.createTextNode('Copied!');copyAlertElement.appendChild(copyMessage);element.appendChild(copyAlertElement);设置超时(函数(){element.removeChild(copyAlertElement);}, 700);}}我再次告诉我的问题，我需要复制按钮才能工作，以便在单击相应按钮时可以复制相应的报价.请访问我的笔以清楚地了解它或见下文.
参考我的 CodePen 项目
<头><风格>/* 主要状态 */.mainStatus{背景色:#fff;边框半径:10px；box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);填充底部:5px；边距:10px；边距顶部:10px；最大宽度:95%；宽度:95%；高度:自动；边框半径:20px；box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);}.statusHeading{文本对齐:居中；背景颜色:#18b495；颜色:#ffffff；填充:10px 10px 10px 10px；边框右上角半径:20px；边框左上角半径:20px；字体粗细:300；字体大小:20px；}.latestatus{显示:网格；高度:自动；box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);填充:10px 20px 10px 20px；边框半径:30px；边距:10px 10px 10px 10px；宽度:445px；最小高度:130px；字体大小:15px；}.allStatus{显示:弹性；}.latestatus p{宽度:自动；位置:相对；}.copystatus{字体粗细:500；文本转换:大写；宽度:100px；高度:40px；}.pagable {显示:弹性；弹性方向:列；边框:var(--pageable-border);背景:var(--pageable-background)；}.pagable .pagable-results {显示:弹性；弹性方向:列；弹性:1；填充:0.25em；}.pagable .pagable-status {显示:弹性；弹性方向:行；对齐内容:间隔；填充:0.25em；背景:var(--pageable-status-background)；}.pagable .pagable-actions {显示:网格；网格自动流:列；网格间隙:0.25em；}.pagable .pagable-actions input[name="page-curr"] {宽度:3em；}</风格><身体><div class="mainStatus"><h2 class="statusHeading">最新英文状态</h2><div class="allquotes"></div><div class="pagable-status"><label>Page <span class="page-no-curr">1</span><span class="page-no-count">1</span></label><div class="pagable-actions"><button class="page-btn-first">≪</button><button class="page-btn-prev"><</button><输入类型=数字"名称=页面当前"min=1"值=1"/><button class="page-btn-next">></button><button class="page-btn-last">≫</button><选择名称=页面大小"><option>5</option><option>10</option><option>20</option></选择><label>(<span class="result-count"></span> items)</label>
<脚本>const resultEl = document.querySelector('.allquotes');const pageSize = document.querySelector('select[name="page-size"]');const pageCurr = document.querySelector('input[name="page-curr"]')const resultCount = document.querySelector('.result-count')const pageNoCurr = document.querySelector('.page-no-curr');const pageNoCount = document.querySelector('.page-no-count')const btnFirst = document.querySelector('.page-btn-first');const btnPrev = document.querySelector('.page-btn-prev');const btnNext = document.querySelector('.page-btn-next');const btnLast = document.querySelector('.page-btn-last');让结果 = [];const getResultCount = () =>结果.长度;const getPageSize = () =>+pageSize.value;const getCurrPage = () =>+pageCurr.value;const getPageCount = () =>Math.ceil(getResultCount()/getPageSize());const pageResponse = (records, pageSize, page) =>(开始 => 记录.切片(开始，Math.min(记录.长度，开始 + 页大小)))(pageSize * (page - 1));const main = async() =>{btnFirst.addEventListener('click', navFirst);btnPrev.addEventListener('click', navPrev);btnNext.addEventListener('click', navNext);btnLast.addEventListener('click', navLast);pageSize.addEventListener('change', changeCount);结果 = 等待retrieveAllQuotes();updatePager(结果)；重绘()；};const 重绘 = () =>{resultEl.innerHTML = '';const paged = pageResponse(results, getPageSize(), getCurrPage());const contents = document.createElement('div');contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">Copy</button></div></div>`).join('');resultEl.append(contents);};const navFirst = (e) =>{pageNoCurr.textContent = 1;pageCurr.value = 1;重绘()；}const navPrev = (e) =>{const pages = getPageCount();const curr = getCurrPage();const prevPage = curr >1 ?curr - 1 : curr;pageCurr.value = prevPage;pageNoCurr.textContent = prevPage;重绘()；}const navNext = (e) =>{const pages = getPageCount();const curr = getCurrPage();const nextPage = curr <页?curr + 1 : curr;pageCurr.value = nextPage;pageNoCurr.textContent = nextPage;重绘()；}const navLast = (e) =>{pageNoCurr.textContent = getPageCount();pageCurr.value = getPageCount();重绘()；}const changeCount = () =>{updatePager();重绘()；};const updatePager = () =>{const count = getPageCount();const curr = getCurrPage();pageCurr.value = curr >数数 ?1 : 当前;pageNoCurr.textContent = curr >数数 ?1 : 咖喱;pageNoCount.textContent = 计数；resultCount.textContent = getResultCount();};constretrieveAllQuotes = 异步函数(){//在这里写你的异步获取返回[{引用:1猫比狗好."},{引用:2Google 是一个开源库."},{引用:3Cats 比雪貂好."},{引用:4Love books".},{引用:5Life is short make it possible."},{语录:6猫胜于狗"},{引用:7Google 是一个开源库."},{引用:8Cats 比雪貂好."},{引用:9Love 书籍".},{引用:10Life is short make it possible."},];}主要的();</html>
您可以将事件处理程序附加到引号 div 的父容器中，并在处理程序内部确定单击的按钮并在其中找到引号.获得报价后，您可以将其复制到剪贴板.
document.querySelector('.allquotes').addEventListener('点击'，功能(e){e.preventDefault();if (e.target && e.target.matches('.copystatus')) {const quote = e.target.parentNode.closest('.latestatus').childNodes[0].textContent;const textArea = document.createElement('textarea');textArea.value = 报价；document.body.appendChild(textArea);textArea.select();document.execCommand('复制');textArea.remove();}},错误的);Hey am new web developer and I have been working on a project. I was working on a quote website. Firstly you visit my CodePen and visit my project.
Please visit my CodePen website then answer or else you cannot understand the question or else I have written my project in the bottom. https://codepen.io/Akash11166666/pen/JjRzqzp
As you saw in my pen there are many copy button under each quote, but they are not working. Although I have tried many Javascript but know of them work.
Remember that the <div>,<p> and <button>Copy</button> elements for quotes are not in html because the are created by Javascript. Just see the javascript carefully.
For reference I will give my Javascript which I tried but it is not working.
The Javascript (Doesn't Work)
var buttons = document.getElementsByClassName('copystatus');
for (let button of buttons) {
button.addEventListener('click', function() {
let statusElement = this.closest('.latestatus');
let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML;
copyTextToClipboard(textToCopy);
addCopyStatusAlert(this.parentNode);
});
}
function copyTextToClipboard(text) {
const copyText = document.createElement('textarea');
copyText.style.position="absolute";
copyText.value = text;
document.body.appendChild(copyText);
copyText.select();
document.execCommand('copy');
document.body.removeChild(copyText);
}
function addCopyStatusAlert(element) {
if (!element.getElementsByClassName('status-copy-alert').length) {
let copyAlertElement = document.createElement('span');
copyAlertElement.classList.add('status-copy-alert')
let copyMessage = document.createTextNode('Copied!');
copyAlertElement.appendChild(copyMessage);
element.appendChild(copyAlertElement);
setTimeout(function() {
element.removeChild(copyAlertElement);
}, 700);
}
}
Again I will tell my problem that, I need the copy button to be worked so that it could copy the respective quote when respective button is clicked. Please visit my pen to understand it clearly or see below.
For reference my CodePen project
<html>
<head>
<style>
/* Main Status */
.mainStatus{
background-color: #fff;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
margin: 10px;
margin-top: 10px;
max-width: 95%;
width: 95%;
height: auto;
border-radius: 20px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.statusHeading{
text-align: center;
background-color: #18b495;
color: #ffffff;
padding: 10px 10px 10px 10px;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
font-weight: 300;
font-size: 20px;
}
.latestatus{
display: grid;
height: auto;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
padding: 10px 20px 10px 20px;
border-radius: 30px;
margin: 10px 10px 10px 10px;
width: 445px;
min-height: 130px;
font-size: 15px;
}
.allStatus{
display: flex;
}
.latestatus p{
width: auto;
position: relative;
}
.copystatus{
font-weight: 500;
text-transform: uppercase;
width: 100px;
height: 40px;
}
.pagable {
display: flex;
flex-direction: column;
border: var(--pageable-border);
background: var(--pageable-background);
}
.pagable .pagable-results {
display: flex;
flex-direction: column;
flex: 1;
padding: 0.25em;
}
.pagable .pagable-status {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0.25em;
background: var(--pageable-status-background);
}
.pagable .pagable-actions {
display: grid;
grid-auto-flow: column;
grid-gap: 0.25em;
}
.pagable .pagable-actions input[name="page-curr"] {
width: 3em;
}
</style>
</head>
<body>
<div class="mainStatus">
<h2 class="statusHeading">Latest English Status</h2>
<div class="allquotes"></div>
<div class="pagable-status">
<label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
<div class="pagable-actions">
<button class="page-btn-first">≪</button>
<button class="page-btn-prev"><</button>
<input type="number" name="page-curr" min="1" value="1" />
<button class="page-btn-next">></button>
<button class="page-btn-last">≫</button>
<select name="page-size">
<option>5</option>
<option>10</option>
<option>20</option>
</select>
</div>
<label>(<span class="result-count"></span> items)</label>
</div>
<script>
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');
let results = [];
const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());
const pageResponse = (records, pageSize, page) =>
(start => records.slice(start, Math.min(records.length, start + pageSize)))
(pageSize * (page - 1));
const main = async() => {
btnFirst.addEventListener('click', navFirst);
btnPrev.addEventListener('click', navPrev);
btnNext.addEventListener('click', navNext);
btnLast.addEventListener('click', navLast);
pageSize.addEventListener('change', changeCount);
results = await retrieveAllQuotes();
updatePager(results);
redraw();
};
const redraw = () => {
resultEl.innerHTML = '';
const paged = pageResponse(results, getPageSize(), getCurrPage());
const contents = document.createElement('div');
contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">Copy</button></div></div>`).join('');
resultEl.append(contents);
};
const navFirst = (e) => {
pageNoCurr.textContent = 1;
pageCurr.value = 1;
redraw();
}
const navPrev = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const prevPage = curr > 1 ? curr - 1 : curr;
pageCurr.value = prevPage;
pageNoCurr.textContent = prevPage;
redraw();
}
const navNext = (e) => {
const pages = getPageCount();
const curr = getCurrPage();
const nextPage = curr < pages ? curr + 1 : curr;
pageCurr.value = nextPage;
pageNoCurr.textContent = nextPage;
redraw();
}
const navLast = (e) => {
pageNoCurr.textContent = getPageCount();
pageCurr.value = getPageCount();
redraw();
}
const changeCount = () => {
updatePager();
redraw();
};
const updatePager = () => {
const count = getPageCount();
const curr = getCurrPage();
pageCurr.value = curr > count ? 1 : curr;
pageNoCurr.textContent = curr > count ? 1 : curr;
pageNoCount.textContent = count;
resultCount.textContent = getResultCount();
};
const retrieveAllQuotes = async function() {
// write your asynchronous fetching here
return[{
quotes: "1The cat is better than dog."
},
{
quotes: "2Google is a open source library."
},
{
quotes: "3Cats are better than ferrets."
},
{
quotes: "4Love books."
},
{
quotes: "5Life is short make it possible."
},
{
quotes: "6The cat is better than dog"
},
{
quotes: "7Google is a open source library."
},
{
quotes: "8Cats are better than ferrets."
},
{
quotes: "9Love books."
},
{
quotes: "10Life is short make it possible."
},
];
}
main();
</script>
</body>
</html>
You can attach the event handler to parent container of your quotes div and inside the handler determine the clicked button and find the quote in it. Once you have the quote you can copy to the clipboard.
document.querySelector('.allquotes').addEventListener(
'click',
function (e) {
e.preventDefault();
if (e.target && e.target.matches('.copystatus')) {
const quote = e.target.parentNode.closest('.latestatus')
.childNodes[0].textContent;
const textArea = document.createElement('textarea');
textArea.value = quote;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('Copy');
textArea.remove();
}
},
false
);
这篇关于在 Javascript 中创建复制按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
