Блог

Главная - Вопросы по программированию - Создать кнопку копирования в Javascript

Создать кнопку копирования в Javascript

#javascript #html

#javascript #HTML

Вопрос:

Привет, я новый веб-разработчик, и я работаю над проектом. Я работал над сайтом с предложениями. Сначала вы заходите в мой CodePen и посещаете мой проект.

Пожалуйста, посетите мой веб-сайт CodePen, а затем ответьте, иначе вы не сможете понять вопрос, иначе я написал свой проект внизу.
https: //codepen.io/Akash11166666/pen/JjRzqzp

Как вы видели в моем pen, под каждой цитатой есть много кнопок копирования, но они не работают. Хотя я пробовал много Javascript, но знаю, что они работают.

Помните, что элементы <div> , <p> и <button>Copy</button> для кавычек отсутствуют в html, потому что они созданы Javascript. Просто внимательно посмотрите на javascript.

Для справки я приведу свой Javascript, который я пробовал, но он не работает.

Javascript (не работает)

 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);
  }
}

Опять же, я расскажу о своей проблеме, что мне нужно, чтобы кнопка копирования работала так, чтобы она могла копировать соответствующую цитату при нажатии соответствующей кнопки. Пожалуйста, посетите my pen, чтобы понять это ясно или см. Ниже.

Для справки мой проект CodePen

 <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">amp;#x226A;</button>
    <button class="page-btn-prev">amp;#60;</button>
    <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next">amp;#62;</button>
    <button class="page-btn-last">amp;#x226B;</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>

Комментарии:

1. Вы связываете эти события после отображения элементов на странице?

Ответ №1:

Вы можете прикрепить обработчик события к родительскому контейнеру вашего подразделения quotes и внутри обработчика определить нажатую кнопку и найти в ней цитату. Как только у вас будет цитата, вы можете скопировать ее в буфер обмена.

 document.querySelector('.allquotes').addEventListener(
  'click',
  function (e) {
    e.preventDefault();
    if (e.target amp;amp; 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
);

Ответ №2:

Я только что проверил ваш codepen. Просто добавьте это onclick='copyTextToClipboard("${record.quotes}")' в свою кнопку копирования.

Я имею в виду, изменить это:

 contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn" >Copy</button></div></div>`).join('');

в это:

 contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn" onclick='copyTextToClipboard("${record.quotes}")'>Copy</button></div></div>`).join('');

Ваша функция copyToClipboard в порядке, добавьте ее и в свой codepen, и все готово

Ответ №3:

Вы можете попробовать, как этот код ниже:

 let btn = document.querySelector("#Your-Btn-ID")
let text = document.querySelector("#Your-Text-ID")

btn.addEventListener('click',()=>{

   text.disabled = false 
   text.select()
   text.setSelectionRange(0, 99999)
   document.execCommand('copy')
   document.getSelection().removeAllRanges()
   text.disabled = true
          
})