Ajouter boutton pour copier le contenu de textarea

Sofiene2022 Messages postés 1 Date d'inscription dimanche 27 novembre 2022 Statut Membre Dernière intervention 27 novembre 2022 - 27 nov. 2022 à 15:53
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 30 nov. 2022 à 23:05

Salut

J'ai ajouté un boutton pour copier le lien d'une image (j'utilise script kleeja )

Mais le problème c'est que le boutton ne copie que le lien du premier text area 

Screenshot

le code utilisé est celui-ci

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

  <style>


@import url('https://fonts.googleapis.com/css2?family=Poppins%3Awght%40400%3B500%3B600&display=swap');
*{
  box-sizing: border-box;
}



.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 ;
  border: 0px;
  background: #3F88C5;
  color: white;
  width: 120px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 800;
  
}

.copied{
  background: #04AA6D;
  transition: 0.5s;
}
.textarea-container {
  position: relative;
  text-align:left;
}
.textarea-container textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.textarea-container button {
 position: absolute;
 top: 0;
left: 1%;
height: 41.5%;
 border-radius:8px;
  
}


</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 -->

    <div class="card mb-5">
        <label for="image1">{b_title}</label>
		<div class="textarea-container">
         <textarea  id="image1" readonly="readonly" rows="1" cols="40" class="form-control" tabindex="8" >{b_url_link}</textarea>
		</div>
		
	<div class="mycontainer">
	
		 <button class="copy-btn" onclick="copy()">نسخ الرابط</button>
  
	</div></div>	

<!-- BEGIN copy script -->

	</head>
	</html>
<script>
const btn = document.querySelector(".copy-btn");
function copy() {
  let textarea = document.getElementById("image1");
  textarea.select();
  document.execCommand("copy");
  alert('copied');
}

      </script>
	 
<!-- BEGIN copyscript -->
    
<!-- END del_file_code -->

Comment peut-on resoudre cet issue

Merci d'avance

1 réponse

@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
30 nov. 2022 à 23:05

bonjour

si le deuxieme textarea  a le meme id que le premier et que tu utilise le même script c'est normale

let textarea = document.getElementById("image1");

0
Rejoignez-nous