Блог

Я создал эту функцию копирования в буфер обмена. это работает в моем Laravel. Но есть некоторые проблемы. Я могу скопировать, но когда я нажимаю кнопку КОПИРОВАНИЯ, текущая страница перезагружается. Еще одна проблема заключается в том, что я хотел бы сделать классный дизайн, подобный «Клонированию с HTTPS» на Github в разделе «Использовать Git или оформить заказ с помощью SVN, используя веб-URL. » предложение на изображении маленького окна. Не могли бы вы научить меня, что не так с моим кодом, пожалуйста?

Форма Laravel находится здесь, мне нужно написать вот так, но при нажатии на копию в буфере обмена я не хочу переходить на следующую страницу

   <form action="{{ url('nextpage') }}" method="post">
  

index.blade.php

 <p><span class="js-copytext">{{$post_data['somedata']}}</span></p>
<p><button class="js-copybtn">copy</button></p>
  

js-файл

 <script>

var copyEmailBtn = document.querySelector('.js-copybtn');
copyEmailBtn.addEventListener('click', function(event) {

    var copyText = document.querySelector('.js-copytext');
    var range = document.createRange();
    range.selectNode(copyText);
    window.getSelection().addRange(range);
    try {

        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy command was '   msg);

    } catch(err) {
        console.log('error');
    }

    window.getSelection().removeAllRanges();
});
</script>
  

Вам нужно добавить event.preventDefault() внутри вашего обработчика.

 copyEmailBtn.addEventListener('click', function(event) {
    event.preventDefault();
    // The rest of your code...
});