1

フォームのラベルをフォーカスされたときにinputタグの上に表示させるアニメーションを作りたいですがラベルの非表示の切り替え方がわかりません

今のソースコードはこのようになってますが問題があります
1つはフォーカスしていないときでもラベルが非表示になっていないことです。どのようにすればうまく実装できるのかわかりませんでした
2つはラベルが2つありますが、2つとも同じ位置に行ってしまうことです。これもどうやって制御して位置を対応させればいいのかがわかりませんでした

jqueryを使っていますがJavascriptやCSSのみの方法でも構いませんのでご回答お願い致します。

$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});
.form-group input {
  position: relative;
}

.form-group label {
  position: absolute;
  left: 0;
  top: 120%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.9s ease-out all;
  z-index: 2;
}

.form-group input:focus+label,
.form-group input:valid+label {
  top: 0;
  font-size: 0.75rem;
  color: #555;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="username" class="form-control" required>
        <label for="username">ユーザー名</label>
      </div> <br> <br> <br>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="email">メールアドレス</label>
      </div>
    </div>
  </div>
  <br>
</form>

1 件の回答 1

2

1つはフォーカスしていないときでもラベルが非表示になっていないことです。

JavaScript コードで <label>active クラスを付け外ししているので、「.active があるときは表示、ないときは非表示」というスタイルを足しましょう。

2つはラベルが2つありますが、2つとも同じ位置に行ってしまうことです。

現在のコードではどちらの <label>position: absolutetop: 0 です。この座標の原点は <body> になりますから、同じ位置に表示されます。
別の原点にするには、たとえば col クラスに position: relative などを付ければよいでしょう。

// 変更なし
$(document).ready(function() {
  $('.form-group input').on('focus', function() {
    $(this).siblings('label').addClass('active');
  });

  $('.form-group input').on('blur', function() {
    if (!$(this).val() && !$(this).attr('required')) {
      $(this).siblings('label').removeClass('active');
    }
  });
});
.form-group input {
  position: relative;
}

.form-group label {
  position: absolute;
  left: 0;
  top: 100vh;  /* 2 */
  transform: translateY(-50%);
  font-size: 1rem;
  color: gray;
  pointer-events: none;
  transition: 0.9s ease-out all;
  z-index: 2;
  visibility: hidden;  /* 1 */
}

.form-group input:focus+label.active,
.form-group input:valid+label.active {  /* 1 */
  top: 0;
  font-size: 0.75rem;
  color: #555;
  visibility: visible;  /* 1 */
}

/* 2 */
.form-group .col {
  position: relative;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<form>
  <div class="form-group">
    <div class="row">
      <div class="col">
        <input type="text" id="firstname" name="username" class="form-control" required>
        <label for="username">ユーザー名</label>
      </div> <br> <br> <br>
      <div class="col">
        <input type="text" id="lastname" name="lastname" class="form-control" required>
        <label for="email">メールアドレス</label>
      </div>
    </div>
  </div>
  <br>
</form>

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。