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

Question

I am using clipboard js

I would like to be able to copy my <pre> content but not sure how to make it work with the code inside bootstrap panel

Here is example what I have tried 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 $1 !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/$1 [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

</div>

Solution

Thanks to @Natrium working

<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 $1 !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/$1 [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

Script

<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

Read the documentation on https://clipboardjs.com/ .

Your button needs an attribute data-clipboard-target where you specify a selector to the element you want to copy.