第一步：引入clipboard.js

<script src="${appRoot}/global/scripts/clipboard.min.js" type="text/javascript"></script>

第二步：設(shè)置標(biāo)簽

<span class="publicate font-blue" title="復(fù)制" data-toggle="tooltip" data-placement="bottom" data-clipboard-text="${(appInfo.url)!}"><i class="fa fa-clone"></i></span>設(shè)置data-clipboard-text的值為要復(fù)制的內(nèi)容；

第三步：在js中進(jìn)行復(fù)制邏輯編寫：

$(function(){$("[data-toggle='tooltip']").tooltip(); $(".publicate").click(function(){toastr.options = {"closeButton": false,"debug": false,"positionClass": "toast-top-right","onclick": null,"showDuration": "1000","hideDuration": "1000","timeOut": "2000","extendedTimeOut": "1000","showEasing": "swing","hideEasing": "linear","showMethod": "fadeIn","hideMethod": "fadeOut"}toastr.success('復(fù)制成功!');});new ClipboardJS('.publicate');//復(fù)制到剪切板插件 })

在這里需要引入兩個(gè)文件toastr插件的css和js，

<link href="/global/plugins/bootstrap-toastr/toastr.min.css" rel="stylesheet" type="text/css" /> <script src="/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>

點(diǎn)擊復(fù)制按鈕，就會(huì)復(fù)制成功：

總結(jié)

以上是生活随笔為你收集整理的js复制操作，复制成功弹出提示框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。