clipboard.js 在最近的一侧复制文本 <pre>

Question

我希望能够复制我的 <pre> 内容，但不确定如何使用 bootstrap 面板中的代码

这是我试过的例子codepen

<script type="text/javascript">
$(document).ready(function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
});
    
</script>

HTML

<div class="container">

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left"> 
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" id="copy-button">Copy</button>
</div>
</div>
</div>
<div class="panel panel-body">
<pre>
RewriteEngine on
RewriteCond  !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/ [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

</div>

解决方案

感谢@Natrium工作

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left"> 
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" id="copy-button" data-clipboard-target="#foo">Copy</button>
</div>
</div>
</div>
<div class="panel panel-body">
<pre id="foo">
RewriteEngine on
RewriteCond  !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/ [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

脚本

<script type="text/javascript">
$(document).ready(function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
});

</script>

Answer 1

阅读 https://clipboardjs.com/ 上的文档。

您的按钮需要一个属性 data-clipboard-target，您可以在其中指定要复制的元素的选择器。

clipboard.js 在最近的一侧复制文本 <pre>

clipboard.js Copy text in side closest <pre>

javascript

clipboard

解决方案