Помогите задать новый класс тегу label посредством фокуса соседнему input
Помогите при фокусе на .request-input__item добавить .request__label новый класс .label__up посредством цикла forEach.
.request__form {
display: grid;
grid-template-columns: repeat(1, 314px 426px);
gap: 58px 20px;
}
.request__input {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 87px;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
}
.request__input:not(:last-child) {
margin-bottom: 20px;
}
.request__label {
position: absolute;
top: 29px;
left: 12px;
display: block;
height: 0;
font-weight: 500;
font-size: 22px;
line-height: 30px;
letter-spacing: 0.5px;
color: #85899F;
cursor: text;
}
.request-input__item {
display: flex;
align-items: center;
width: 100%;
height: 100%;
font-weight: 600;
font-size: 26px;
line-height: 36px;
letter-spacing: 0.5px;
color: #0A123E;
padding: 12px;
border: 1px solid red;
background: none;
}
.request-input__item:focus+.request__label {
color: red;
}
.label__up {
position: absolute;
top: 2px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
transition: all 0.3s linear;
}
.request__area {
width: 100%;
}
.request-textarea__item {
width: 100%;
height: 100%;
resize: none;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
border: none;
padding: 12px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
}
.request__descr {
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #85899F;
}
.request-block__submit {
display: flex;
justify-content: flex-end;
width: 100%;
}
.input__submit {
width: 242px;
height: 52px;
background: #E90423;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 20px;
line-height: 27px;
color: #FFFFFF;
cursor: pointer;
}
<form action="" class="request__form">
<div class="column">
<div class="request__input" tabindex="0">
<label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
<input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
</div>
</div>
<div class="request__area">
<textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
</div>
<p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
<div class="request-block__submit">
<input type="submit" class="input__submit" value="Отправить письмо">
</div>
</form>
Ответы (2 шт):
Автор решения: Pilaton
→ Ссылка
Заметьте, код только добавляет класс label__up, но не убирает его, как вы и просили.
document.querySelectorAll('.request-input__item').forEach((input) => {
input.addEventListener('focus', (ev) => {
ev.target.previousElementSibling.classList.add('label__up');
});
});
.request__form {
display: grid;
grid-template-columns: repeat(1, 314px 426px);
gap: 58px 20px;
}
.request__input {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 87px;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
}
.request__input:not(:last-child) {
margin-bottom: 20px;
}
.request__label {
position: absolute;
top: 29px;
left: 12px;
display: block;
height: 0;
font-weight: 500;
font-size: 22px;
line-height: 30px;
letter-spacing: 0.5px;
color: #85899F;
cursor: text;
}
.request-input__item {
display: flex;
align-items: center;
width: 100%;
height: 100%;
font-weight: 600;
font-size: 26px;
line-height: 36px;
letter-spacing: 0.5px;
color: #0A123E;
padding: 12px;
border: 1px solid red;
background: none;
}
.request-input__item:focus+.request__label {
color: red;
}
.label__up {
position: absolute;
top: 2px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
transition: all 0.3s linear;
}
.request__area {
width: 100%;
}
.request-textarea__item {
width: 100%;
height: 100%;
resize: none;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
border: none;
padding: 12px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
}
.request__descr {
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #85899F;
}
.request-block__submit {
display: flex;
justify-content: flex-end;
width: 100%;
}
.input__submit {
width: 242px;
height: 52px;
background: #E90423;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 20px;
line-height: 27px;
color: #FFFFFF;
cursor: pointer;
}
<form action="" class="request__form">
<div class="column">
<div class="request__input" tabindex="0">
<label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
<input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
</div>
</div>
<div class="request__area">
<textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
</div>
<p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
<div class="request-block__submit">
<input type="submit" class="input__submit" value="Отправить письмо">
</div>
</form>
Автор решения: yar85
→ Ссылка
Когда соседний элемент всего один, "найти" его можно и без цикла, используя свойство previousElementSibling или nextElementSibling.
Я смог придумать только одно возможное (и хотя бы чуток разумное) применение forEach в данном случае - перебор названий событий:
const handler = evt => {
const labelEl = evt.target.previousElementSibling;
labelEl.classList.toggle('label__up', evt.type === 'focus');
};
const eventsToListen = ['focus', 'blur'];
for (const inpEl of document.querySelectorAll('.request-input__item'))
eventsToListen.forEach(evt => inpEl.addEventListener(evt, handler));
.request__form {
display: grid;
grid-template-columns: repeat(1, 314px 426px);
gap: 58px 20px;
}
.request__input {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 87px;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
}
.request__input:not(:last-child) {
margin-bottom: 20px;
}
.request__label {
position: absolute;
top: 29px;
left: 12px;
display: block;
height: 0;
font-weight: 500;
font-size: 22px;
line-height: 30px;
letter-spacing: 0.5px;
color: #85899F;
cursor: text;
}
.request-input__item {
display: flex;
align-items: center;
width: 100%;
height: 100%;
font-weight: 600;
font-size: 26px;
line-height: 36px;
letter-spacing: 0.5px;
color: #0A123E;
padding: 12px;
border: 1px solid red;
background: none;
}
.request-input__item:focus+.request__label {
color: red;
}
.label__up {
position: absolute;
top: 2px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
transition: all 0.3s linear;
}
.request__area {
width: 100%;
}
.request-textarea__item {
width: 100%;
height: 100%;
resize: none;
background: rgba(10, 18, 62, 0.05);
border-radius: 6px;
border: none;
padding: 12px;
font-weight: 500;
font-size: 16px;
line-height: 22px;
letter-spacing: 0.5px;
color: #85899F;
}
.request__descr {
font-weight: 500;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.5px;
color: #85899F;
}
.request-block__submit {
display: flex;
justify-content: flex-end;
width: 100%;
}
.input__submit {
width: 242px;
height: 52px;
background: #E90423;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 20px;
line-height: 27px;
color: #FFFFFF;
cursor: pointer;
}
<form action="#" class="request__form">
<div class="column">
<div class="request__input" tabindex="0">
<label for="requestName" class="request__label">Ваше имя<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestName" name="name" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestEmail" class="request__label">E-mail адрес<span class="red">*</span></label>
<input type="email" class="request-input__item" id="requestEmail" name="email" autocomplete="off">
</div>
<div class="request__input" tabindex="0">
<label for="requestPhone" class="request__label">Телефон<span class="red">*</span></label>
<input type="text" class="request-input__item" id="requestPhone" name="phone" autocomplete="off">
</div>
</div>
<div class="request__area">
<textarea name="" id="requestArea" cols="30" rows="10" class="request-textarea__item" placeholder="Сообщение:"></textarea>
</div>
<p class="request__descr"><span class="red">(*)</span> - обязательные поля</p>
<div class="request-block__submit">
<input type="submit" class="input__submit" value="Отправить письмо">
</div>
</form>