Question

我做了这个剪贴板复制功能。它在我的Laravel上工作。但是有一些问题。我可以复制，但是当我单击COPY按钮时会重新加载当前页面。另一个想法是，我想在“使用Git或使用Web URL使用SVN进行结帐”下进行Github的“使用HTTPS克隆”这样的酷设计。在小窗口的图像上。您能教我我的代码有什么问题吗？

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>

Answer 1

您需要在处理程序中添加event.preventDefault()。

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

在Laravel中启动JS函数时如何关闭重新加载

1 个答案: