Bootstrap поделиться URL-контейнером

Question

У меня есть приложение, которое генерирует URL, которым нужно поделиться. Я пытаюсь найти подходящий контейнер для отображения сгенерированного URL-адреса с помощью начальной загрузки 4.

Я хочу, чтобы он выглядел и вел себя примерно как ссылка на Google Drive (на рисунке ниже):

Когда вы щелкаете внутри него, он выделяет весь текст внутри и облегчает его копирование. Для этого есть компонент начальной загрузки?

Answer 1

Вы можете настроить функцию копирования в javascript

<div class="container">
    <input type="text" value="Hello World" id="myInput">
    <button onclick="myFunction()">Copy text</button>
</div>

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

, а затем установить стиль с помощью Bootstrap 4.