将文本复制到剪贴板不适用于jQuery

问题描述 投票：0回答：4

我有一篇文章带有div，我想从那篇文章中获取特定行并将其复制到剪贴板中，因为我已经在下面编写了一些代码

$(document).ready(function(){
	$.fn.renderedText = function(){
	  var o = s = this.text();
	  while (s.length && this[0].scrollHeight >  this.innerHeight()){
	    s = s.slice(0,-1);
	    this.text(s+"…");
	  }
	  this.text(o);
	  return s;
	};

	$(".event_button").click(function(){ 	
      var $temp = $("<input>");
      $("body").append($temp);
      $temp.val($('.dummy').renderedText()).select();
      document.execCommand("copy");
      console.log($temp);
      $temp.remove();
    
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dummy" style="display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed. Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac tortor dignissim convallis aenean et tortor at. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc. Et magnis dis parturient montes nascetur. Est placerat in egestas erat imperdiet. Consequat interdum varius sit amet mattis vulputate enim.Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere.  </div>


<button><span data-value="copyText" id="copyText" class="event_button button btn cpytxt">Copy</span></button>

但是我的复制代码不起作用。

这意味着有时复制文本有时无法正常工作。

有时，当我单击复制按钮上的2-3，然后复制一次。

有人可以帮我这个忙。

jquery html copy
4个回答
0
投票

更好的HTML必须像：

<span data-value="copyText" id="copyText" class="event_button button btn button_span active cpytxt">
      <button>Copy</button>
</span>

和脚本类似：

<script>
$(document).ready(function(){
    $.fn.renderedText = function(){
      var o = s = this.text();
      while (s.length && this[0].scrollHeight >  this.innerHeight()){
        s = s.slice(0,-1);
        this.text(s+"…");
      }
      this.text(o);
      return s;
    };

    $(".button_span.active").on('click', function(event){ 
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($('.dummy').renderedText()).select();
        document.execCommand("copy");
        console.log($temp);
        $temp.remove();
        console.log('copied!')
    });
});

</script>

如果要立即加载它们，可以添加$(".button_span.active").click()。但是，如果页面上有多个项目。这将尝试复制每个元素，只有最后一个元素将处于非活动剪贴板。

0
投票

对于解决方案，您可以检查By Click Here，也可以遵循我添加的以下代码，我已经在本地计算机中签入并且在测试时可以正常工作。

 <div id="div_1">
     This is the first content we want to select and copy to the clipboard.
 </div>
 <a id="div_1" href="#" name="copy_pre">Copy Contents</a>

  <div id="div_2">
    This is the second content we want to select and copy to the clipboard.
  </div>
  <a id="div_2" href="#" name="copy_pre">Copy Contents</a>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
  </script>

 <script >
    $(document).ready(function(){
       $("a[name=copy_pre]").click(function() {
           var id = $(this).attr('id');
           var el = document.getElementById(id);
           var range = document.createRange();
           range.selectNodeContents(el);
           var sel = window.getSelection();
           sel.removeAllRanges();
           sel.addRange(range);
           document.execCommand('copy');
           alert("Contents copied to clipboard.");
           return false;
        });
      });
  </script>

我真的希望这会帮助您解决您的问题！ ：）。

0
投票

请尝试一下

function copyToClipboard(text) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(text).select();
  document.execCommand("copy");
  $temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut lab222</div>

<button id="copy" onclick="copyToClipboard($('.my_text').text())">copy</button>
0
投票

尝试这个，它应该可以按照您想要的方式工作。我只是在代码块外面放了几行代码，将在单击后执行。

$(document).ready(function(){
	$.fn.renderedText = function(){
	  var o = s = this.text();
	  while (s.length && this[0].scrollHeight >  this.innerHeight()){
	    s = s.slice(0,-1);
	    this.text(s+"…");
	  }
	  this.text(o);
	  return s;
	};
  
    //Array variable for generate random strings
    var sentences= [
    'so fat not even Dora can explore her',
    'so  fat I swerved to miss her and ran out of gas',
    'so smelly she put on Right Guard and it went left',
    'so fat she hasn’t got cellulite, she’s got celluheavy',
    'so fat she don’t need no internet – she’s already world wide',
    'so hair her armpits look like Don King in a headlock',
    'so classless she could be a Marxist utopia',
    'so fat she can hear bacon cooking in Canada',
    'so fat she won “The Bachelor” because she all those other bitches',
    'so stupid she believes everything that Brian Williams says',
    'so ugly she scared off Flavor Flav',
    'is like Domino’s Pizza, one call does it all',
    'is twice the man you are',
    'is like Bazooka Joe, 5 cents a blow',
    'is like an ATM, open 24/7',
    'is like a championship ring, everybody puts a finger in her'
    ];

    var $temp = '';
    $('#generate_btn').on('click', function(){
      var index= Math.floor(Math.random() * (sentences.length));
      $('.dummy').text(sentences[index]);
      
      $temp = $("<input style='position:absolute;top:-10000px;'>");
      $("body").append($temp);
      $temp.val($('.dummy').renderedText());
    });

	$(".event_button").click(function(){ 	
      if($temp!=''){
        $temp.select();
        document.execCommand("copy");
        console.log($temp.val());
       }else{
        alert("Please click generate");
       }
    
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="generate_btn">generate</button>

<div class="dummy" style="display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"></div>


<button><span data-value="copyText" id="copyText" class="event_button button btn cpytxt">Copy</span></button>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.