Как с помощью jquery скопировать значение placeholder из input и добавить его в label

Question

Здравствуйте!

Есть следующая конструкция:

.alpha {
  padding: 10px;
  margin: 10px;
  background: #f7f7f7;
}

.alpha input,
.alpha label {
  width: 200px;
  box-sizing: border-box;
}

.omega {
  display: block;
  height: 20px;
  background: #e9e9e9;
  color: #ff0000;
  margin-top: 5px;
}

<div class="alpha">
  <input placeholder="Имя">
  <label class="omega"></label>
</div>
<div class="alpha">
  <input placeholder="Адрес">
  <label class="omega"></label>
</div>

Необходимо скопировать значение placeholder из каждого отдельного input и добавить его в label.

Сразу прописать в label нет возможности.

Как это реализовать с помощью скрипта?

Благодарю за ответ!

Answer 1

ответ, казалось бы на поверхности. взять инпуты, у которых есть атрибут placeholder, обойти их всех, найти соседние label и вписать им значение

$(function(){
  $("input[placeholder]").each(function(){
     $(this).next("label").text( $(this).attr('placeholder') );
  });
})

.alpha {
  padding: 10px;
  margin: 10px;
  background: #f7f7f7;
}

.alpha input,
.alpha label {
  width: 200px;
  box-sizing: border-box;
}

.omega {
  display: block;
  height: 20px;
  background: #e9e9e9;
  color: #ff0000;
  margin-top: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alpha">
  <input placeholder="Имя">
  <label class="omega"></label>
</div>
<div class="alpha">
  <input placeholder="Адрес">
  <label class="omega"></label>
</div>

Если инпуты снабдить id, а лейблы атрибутом for, то можно не привязываться к структуре DOM. но это видимо не ваш случай

БЛОГ НА HUSL

Как с помощью jquery скопировать значение placeholder из input и добавить его в label

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