Добавление значка «ссылка» для копирования URL-адресов на веб-странице - PullRequest
Новая
       13

Добавление значка «ссылка» для копирования URL-адресов на веб-странице

0 голосов
/ 07 апреля 2020

Я html - форматирую новый договор моего профсоюза учителей для нашего сайта. Мы хотели бы иметь значок ссылки (или слова «копировать ссылку») после различных разделов (которые имеют атрибут name). Это позволит участникам копировать ссылки на различные разделы в его / ее буфер обмена ... и затем направлять других к указанию c разделов нашего очень длинного контракта. Могу ли я сделать это с html кодом?

Вот мой прогресс: 

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

<input size="20" type="text" value="https://www.example.com#ARTICLE2" id="myInput"><button onclick="myFunction()">Copy text</button>

1 Ответ

1 голос
/ 08 апреля 2020

Так что добавьте querySelectorAll, чтобы выбрать все ссылки, к которым вы хотите добавить его. Возможно, вам придется уточнить его, если он выбирает слишком много. И добавьте элемент, чтобы щелкнуть и скопировать его. 

function copyIt(text) {
  var input = document.createElement('input');
  input.setAttribute('value', text);
  document.body.appendChild(input);
  input.select();
  var result = document.execCommand('copy');
  document.body.removeChild(input);
  return result;
}



document.querySelectorAll('a[name]').forEach(function (anchor) {
  anchor.addEventListener("click", function (){
    var page = window.location.href.replace(/#.*$/, '')
    copyIt(page + '#' + anchor.name);
  });
});
a[name]::after {
  content: '\2693';
  cursor: pointer;
}
<a name="ARTICLE5-1"></a>1
<p>a</p>
<a name="ARTICLE5-2"></a>2
<p>b</p>
<a name="ARTICLE5-3"></a>3
<p>c</p>
<a name="ARTICLE5-4"></a>4
<p>d</p>
<a name="ARTICLE5-5"></a>5
<p>e</p>
...