Insertion image (smileys) textarea

J'aime beaucoup développer quelque chose de simple, je débute en JS/jQuery mais je ne sais pas, au click, faire en sorte que l'image sélectionnée puisse apparaître dans un textarea.

HTML
<img src="http://image.jeuxvideo.com/smileys_img/1.gif" height="30" id="img" />
<img src="http://image.jeuxvideo.com/smileys_img/2.gif" height="30" id="img" />
<textarea type="text" id="div1"> </textarea>

JS

$(function() {
$('#img').click(function() {
var img=$(this).attr('src');

$('#div1').append('<img src="'+img+'" alt="" />');
});

});

L'ajout d'une image fonctionne en remplaçant le `<textarea>` par une` <div>`et une seule image s'insert.
Par Gamer1111 le 11 Aug 2018
Cette pub permet au site de vivre ...

3 Commentaires

Tu veux participer ?
Alors connecte toi ou inscris toi et viens participer !
Clouder
Le 12 Nov 2018
Désolé du super long temps que j'ai mis pour répondre à ta question .. 😊

Alors pour faire simple tu peux faire comme ça :

Côté PHP
$cpt = 0;

foreach($mavar as $mv){
cpt += 1;
<img onclick="myFunction(<?=$cpt['id']?>)" src="http://image.jeuxvideo.com/smileys_img/<?= $mv['nomImage'] ?>" height="30" id="img<?= $cpt ?>" />
}

Côté JavaScript
<script type="text/javascript">
function myFunction(e) {
var monImage;
monImage = document.getElementById('img'+e).src;

var myTextArea = $('#div1');
myTextArea.val(myTextArea.val() + '<img src="'+monImage+'" alt="" height="30" />');
}
</script>

Par contre avec cette solution tu viens copier le texte dans ton textarea alors que append permet d'afficher le rendu d'un code HTML !
Voilà ! 🙂
Gamer1111
Le 03 Nov 2018
Oui c'est je pense le moyen le plus simple & brut d'ajouter une image dans un textarea, l'as-tu testé ?
Clouder
Le 30 Aug 2018
Bonjour Gamer1111, 

Effectivement ce que tu as fait fonctionne parfaitement mais le problème est que cela ne fonctionnement que pour 1 image !

Je vais tester de mon côté et je reviens vers toi !

Désolé pour la réponse tardive !