Как при клике на элемент скопировать его текст в input value?

Question

К примеру, есть вот такая HTML конструкция с одинаковыми селекторами:

<div class="text-wrap">
    <div class="text-item">
        Текст 1
    </div>
    
    <div class="text-item">
        Текст 2
    </div>
    
    <div class="text-item">
        Текст 3
    </div>
    
    <div class="text-item">
        Текст 4
    </div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>

Как при клике на элемент с классом text-item скопировать его содержимое в поле #input?

Answer 1

Вариант на JS

document.querySelector('.text-wrap').addEventListener('click', function(event) {
  let textItem = event.target.closest('.text-item');
  if(textItem) {
    document.querySelector('#input').value = textItem.textContent;
  }
});

<div class="text-wrap">
    <div class="text-item">Текст 1</div>
    <div class="text-item">Текст 2</div>
    <div class="text-item">Текст 3</div>
    <div class="text-item">Текст 4</div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>

Вариант на JQ

$('.text-wrap').on('click', '.text-item', function(){
  $('#input').val($(this).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="text-wrap">
    <div class="text-item">Текст 1</div>
    <div class="text-item">Текст 2</div>
    <div class="text-item">Текст 3</div>
    <div class="text-item">Текст 4</div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>

БЛОГ НА HUSL

Как при клике на элемент скопировать его текст в input value?

Ответы (1 шт):