【解決方法】異なるテキストエリアからコピーするための同じボタン

プログラミングQA

2022.11.30

[ad_1]

私は2つの異なるテキストエリアとボタンを作成し、同じボタンがクリック時にテキストエリアのコンテンツをコピーすることを望みます

これは私のhtmlコードです

HTML

<pre><html>
<head>
<!-- BEGIN image_thumb --><head>

  <style>


.mycontainer{
  background: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
}

.copy-text{
  border: 2px solid #111;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  height: 350px;
  width: 800px;
  margin-bottom: 20px;
  font-family: inherit;
  border-radius: 2px;
}

.copy-btn{
  padding: 12px 12px;
  border: 0px;
  background: #3F88C5;
  color: white;
  width: 120px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
}

.copied{
  background: #04AA6D;
  transition: 0.5s;
}
::selection{
  background: #04AA6D;
  color:white;
}


</style>


    <div class="text-center mt-3 w-100">
        <a target="_blank" href="{b_url_link}"><img src="{b_img_link}" alt="" class="img-thumbnail rounded" /></a>
    </div>


    
<!-- END image_thumb -->


<!-- BEGIN image -->

    
        <label for="image1">{b_title}</label>
		
         <textarea   id="image1" rows="1" cols="40" class="form-control" tabindex="2" >{b_url_link}</textarea>
		
		
	<div class="mycontainer">
	
		 <button class="copy-btn"  >Copy</button>
  
	</div></div>
    
    </<br>
    
     <textarea   id="image1" rows="1" cols="40" class="form-control" tabindex="2" >{b_url_link}</textarea>
		
		
	<div class="mycontainer">
	
		 <button class="copy-btn"  >Copy</button>
  
	</div></div>

これは私のjavascriptコードです

JavaScript

<pre>
const btn = document.querySelector(".copy-btn");
const text = document.querySelector(".form-control");

btn.addEventListener("click", () =>{
  text.select();
  text.setSelectionRange(0, 10000);
  document.execCommand("copy");
  btn.classList.toggle("copied");
  btn.innerHTML = "Copied";

  setTimeout(function(){
    btn.classList.toggle("copied");
    btn.innerHTML = "Copy";
  }, 3000);
});

コピーボタンをクリックすると、対応するテキストエリアのコンテンツがコピーされることを望みます。
よろしく

スクリーンショットのリンク

私が試したこと：

同じボタンで異なるテキストエリアのコンテンツをコピーする

解決策 1

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

[ad_2]