Code Ready | Frontend

✅ Как скопировать текст в буфер обмена нажатием на кнопку?



На самом деле, создать данную кнопку очень просто, в основном весь код занимает как раз стилизация input и самой button. ⬇️



☑️ Чтобы долго не объяснять, мы оставляем ниже готовый код, написанный на HTML, CSS и JavaScript для создания красиво стилизованной кнопки копировать в буфер обмена:



HTML ⤵️

<input type="text" id="input"> 

  <button onclick="copytext()" type="button">Скопировать</button>

SCSS ⤵️

 body {

  text-align: center;

  margin-top: 10%;

  background-color: #000;

}

 input, button {

  padding: .4em;

  width: 200px;

  font-size: 20px;

  border: none;

  outline: none;

  border-bottom: .2em solid #E91E63;

  background: rgba(#E91E63, .2);

  color: #E91E63;

}

JavaScript ⤵️

 function copytext() {

  const copyText = 

  document.getElementById('input'); 

  const copy = copyText.value;

  navigator.clipboard.writeText(copy).then(

  function () { 

  console.log('Успешно'); 

  }).catch(function (err) { 

  console.log('Something went wrong', err);

  });

  

  alert("Copied the text: " + copyText.value);

} 

@code_ready | #практика #html #css #js