White space not removing when using firefox with clipbord js

Question

I am using clipbord.js When I click on my button and copy the code and then paste it some where it leaves quite a large gap at the top

I have tried using .replace(/\s/g, "") on here

Codepen Example --> Link has been updated with working code

Question: When use firefox how to make sure that there is no gap when I have copied the code and then go to paste it.

There is no gap when I use Google Chrome, Edge, Internet Explore

$(document).ready(function() {  
    new Clipboard("#copy-button", {
        text: function(trigger) {
            var str = $(trigger).parent().find('pre').text();
            return str.replace(/\s/g, "");
        }
    });
});

HTML

<div class="container">
  
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div class="page-header"><h1>Clean URLs</h1></div>  
</div>
</div>

<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" style="padding-top: 7.5px;">
<h1 class="panel-title">Example 1</h1>
</div>
<div class="pull-right">
<button type="button" id="copy-button" data-clipboard-target="#h1" class="btn btn-primary"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Copy</button>
</div>
</div>
</div>

<div class="panel-body">
<pre id="h1">
Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond $1 !^(index\.php|images|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
</pre>
</div>
</div>
</div>


<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" style="padding-top: 7.5px;">
<h1 class="panel-title">Example 2</h1>
</div>
<div class="pull-right">
<button type="button" id="copy-button" data-clipboard-target="#h2" class="btn btn-primary"><i class="fa fa-clipboard" aria-hidden="true"></i>&nbsp;&nbsp;Copy</button>
</div>
</div>
</div>

<div class="panel-body">
<pre id="h2">
RewriteEngine On
RewriteBase /root_folder_name/
RewriteCond %{REQUEST_URI} ^system.*
RewriteCond $1 !^(index\.php|images|js|uploads|css|robots\.txt)
RewriteRule ^(.*)$ /index.php/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]
</pre>
</div>
</div>
</div>

</div>


</div>

I have tested your pen, but everything seems fine for me (chrome) — Tobias Timm, Sep 16 '16 at 06:58
@TobiasTimm when I paste copied code into edit it shows lots of spaces at top of copied code — , Sep 16 '16 at 06:59
i've tried it with every field and every combination. I don't have any leading whitespaces at all. Hm which browser are you using? — Tobias Timm, Sep 16 '16 at 07:03
@TobiasTimm firefox latest version working in chrome but not firefox — , Sep 16 '16 at 07:04

score 1 · Accepted Answer · answered Sep 16 '16 at 07:15

1

The problem was $(trigger).parent().find('pre').text() returned empty string. So, I've modified it to $(trigger).closest('.panel').find('pre').text();

Check the pen http://codepen.io/pranesh-r/pen/QKEjEr

answered Sep 16 '16 at 07:15

Pranesh Ravi

18,642
9
46
70

White space not removing when using firefox with clipbord js

1 Answers1