Вопросы Теги

Сомнение относительно оживления input-label

Я хочу ответить это оживление, которое состоит в, когда неудар в лунку этот 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

2
задан 07.11.2019, 06:10
1 ответ

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>
2
ответ дан 01.12.2019, 12:27
  • 1
    Я заношу в список, функционируй такой как querí в, ¡ большое спасибо! – idionisio 08.11.2019, 20:03