Я хочу ответить это оживление, которое состоит в, когда неудар в лунку этот onfocus, Ваш соответствующий label (который образно внутри неудара в лунку) поднимется до верхней части неудара в лунку, оставляя место пользователю, чтобы мочь видеть, что он вводит информацию в компьютер, и кликнув вне неудара в лунку или перейдя в следующий неудар в лунку, если он ничего не считает написанным в, label загрузился.
То, что мне удалось сделать, состоит в том, чтобы label поднялся до clickear в неударе в лунку, но достав "focus" неудара в лунку, эффект не повторно опрокидывается, label остается наверху до тех пор, пока ты вновь не кликаешь в неударе в лунку.
HTML:
JS:
var label1 = document.getElementById('label1');
var input1 = document.getElementById('input1');
input1.addEventListener('onfocus', (e) => {
if(input1.value === "") {
label1.classList.toggle("inputSeleccionado");
}
});
Если в кого-то ему стоит видеть полный код: https://codepen.io/TCassas/pen/oNNdZLe
EstГЎs используя свойство onfocus
вместо события focus
а следовательно даже не может функционировать твой пример. С другой стороны ahГ - то, что ты делаешь, состоит в том, чтобы прекращаться или aГ±adir класс каждый раз, когда элемент берет фокус каждый раз, когда input
этот vacГ - или но deberГ-эксперт aГ±adir класс, когда у него будет фокус, и снимать ее, потеряв это с событием blur
.
Я Помещаю пример в того, который меняет label
цвета, когда input
он берет фокус и это снимает, когда он это теряет только, если он vacГ - или:
var label1 = document.getElementById("label1");
var input1 = document.getElementById("input1");
input1.addEventListener("focus", e => {
if (input1.value === "") {
label1.classList.add("inputSeleccionado");
}
});
input1.addEventListener("blur", e => {
if (input1.value === "") {
label1.classList.remove("inputSeleccionado");
}
});
.inputSeleccionado {
color: red;
}
<div class="grupoLI" id="xD">
<label for="" id="label1">First Name</label>
<input type="text" id="input1">
</div>