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