输入文本字段标签动画 |香草 JavaScript

Question

我正在处理表单（前端挑战）并坚持输入文本字段动画。

我尝试使用占位符而不是标签，但它不起作用。我不确定我是否走在正确的轨道上。下面分享代码。我必须用 Vanilla JS 来完成它。

当我关注输入字段时，标签会按我的意愿上升，然后焦点又回来了。 但是，如果我用输入字段中的文本、标签和文本一起填充输入。如果 Input 有一个文本标签需要留在顶部。提前谢谢你。

// console.log("Hey, It's working");
const form = () => {
  const inputText = document.querySelector("input[type=text]");
  const nameText = document.getElementById("yourname");

  inputText.addEventListener("focusin", (e) => {
    nameText.classList.add("active");
  });

  inputText.addEventListener("focusout", (e) => { 
      nameText.classList.remove("active");
  });
};

form();

fieldset {
  border: medium none !important;
  margin: 0 0 10px;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#sign-up-form {
  padding: 25px;
  margin: 50px 0;
}

input[type="text"] {
  width: 100%;
  border: 1px solid #ccc;
  margin: 0 0 5px;
  padding: 10px;
  border-radius: 4px;
}

label {
  font-size: 0.9em;
  opacity: 0.5;
  -webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

#sign-up-form {
  text-align: center;
}

input {
  margin: auto;
}

fieldset {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  margin-left: -200px;
  margin-top: 10px;
  padding: 0 10px;
}

input {
  display: block;
}

.active {
  top: -20px;
  opacity: 1;
  background-color: $input-background;
  z-index: 1000;
}

<form id="sign-up-form">
    <fieldset>
      <label id="yourname" for="yourName">Your Name</label>
      <input
        class="form-control"
        type="text"
        size="30"
        autocomplete="off"
        tabindex="0"
        required
      />
    </fieldset>
</form>

Answer 1

在从nameText 中删除active 类之前，您需要检查输入是否为空。如果输入为空，则无需从nameText 中删除active 类。见下面代码sn-p。

inputText.addEventListener("focusout", (e) => { 
      if(inputText.value.length == 0)
          nameText.classList.remove("active");
});

此外，String.prototype.trim 还应该用于检查 inputText 中的空格。