jQuery нажмите на изображения и «скопируйте / вставьте» добавьте значение элемента img во ввод текста типа

Question

Речь идет о скрипте чата, в котором пользователи могут нажимать на изображения смайликов, чтобы это значение можно было вставить во ввод текста типа. У меня это работает хорошо, но проблема в том, что когда я нажимаю на разные img emoji, мне нужно это значение элемента img.

jquery

$(document).on('click', '.copy', function(){
        $('.paste').val(function(index, val){
            return val + $('.copy').attr('value');
        });

});

html

<form id="frmsend" method="post" action="process.php">
<div class="input-group">
    <input class="form-control paste" type="text" name="text" id="text" placeholder="type your text here" autofocus />
    <div class="input-group-append">
           <input class="form-control" type="submit" name="send" value="Send" id="send" />
    </div>
</div>
</form>
<img class="copy" src="openmoji/1F642.svg" height="40" width="40" value=":)"></img>
<img class="copy" src="openmoji/1F609.svg" height="40" width="40" value=";)"></img>
<img class="copy" src="openmoji/1F600.svg" height="40" width="40" value=":D"></img>
<img class="copy" src="openmoji/1F618.svg" height="40" width="40" value=":*"></img>
<img class="copy" src="openmoji/1F606.svg" height="40" width="40" value="xD"></img>
<img class="copy" src="openmoji/1F61C.svg" height="40" width="40" value=";P"></img>
<img class="copy" src="openmoji/1F61B.svg" height="40" width="40" value=":P"></img>
<img class="copy" src="openmoji/1F61D.svg" height="40" width="40" value="xP"></img>

фактическая демонстрация проблемы

Answer 1

$(document).on('click', '.copy', function(e){
let v = $(".paste").val();
       $(".paste").val(
       v + e.target.getAttribute("value")
       )
});

Надеюсь, это поможет вам. Удачи - Адель Чемач

Answer 2

Вы должны принять значение нажатых эмодзи, используя this, чтобы функция повернулась следующим образом. С вашей функцией он берет первый элемент.

$(document).on('click', '.copy', function(){
        const emoji = $(this).attr('value');
        $('.paste').val(function(index, val){
            return val + emoji;
        });

});

Answer 3

Вы можете просто использовать этот маленький код для выполнения функции. - Использование jQuery

$('.copy').click(function(){
    var image = $(this).attr('value');
    $('#text').val($('#text').val() + image);
});

Если вы хотите, чтобы у входного значения было только одно значение изображения, вы можете заменить код на - просто замените $('#text').val($('#text').val() + image); на $('#text').val(image);, который будет выглядеть так:

$('.copy').click(function(){
    var image = $(this).attr('value');
    $('#text').val(image);
});