Saya memiliki beberapa bagian ke formulir. Setiap bagian memiliki indikator tentang langkah pengguna. Saya ingin memilikinya sehingga setiap kali input dalam suatu bagian difokuskan, itu memulai animasi pada indikator. Saya tidak dapat menggunakan :fokus-dalam karena saat ini tidak menjadi standar browser.

Saat ini saya telah menyimpan animasi pulsa sebagai efek hover, tetapi saya ingin animasi ini dimulai ketika input difokuskan. Saya berpikir untuk menggunakan JQuery, tetapi saya tidak dapat menemukannya sendiri.

Bantuan apa pun akan sangat dihargai.

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

#indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  padding: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}

#indicator:hover {
  animation: pulse 2s ease infinite;
}

#indicator p {
  padding-top: 3px;
  margin: 5px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}


/* what i think i want to do? */

input:focus {
  /* somehow start indicator animation???
     Maybe use javascript? */
}
<form>

  <section>
    <div id="indicator">
      <p>1</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>2</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

  <section>
    <div id="indicator">
      <p>3</p>
    </div>

    <input type="text" />
    <input type="email" />
    <input type="password" />
  </section>

</form>
0
emoore 22 Oktober 2019, 22:24

2 jawaban

Jawaban Terbaik

Ubah setiap bagian menjadi flexbox. Posisikan .indicator setelah input, dan gunakan order: -1 untuk memindahkannya ke atas. Sekarang Anda dapat menggunakan kombinator saudara input:focus~.indicator untuk memanggil animasi.

@keyframes pulse {
  0%,
  40% {
    box-shadow: 0 0 0 5px rgba(0, 109, 168, 0);
  }
  0% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
  }
}

section {
  display: flex;
  flex-direction: column;
  width: 50vw;
}

section .indicator {
  order: -1;
}

.indicator {
  background-color: #006da8;
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  margin-top: 15px;
  margin-bottom: 15px;
  color: white;
  text-align: center;
}

input {
  display: block;
  margin: 10px 0 10px 0;
}

input:focus~.indicator {
  animation: pulse 2s ease infinite;
}
<form>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">1</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">2</div>
  </section>

  <section>
    <input type="text" />
    <input type="email" />
    <input type="password" />

    <div class="indicator">
      <p>3</p>
    </div>
  </section>

</form>
1
Ori Drori 22 Oktober 2019, 19:42

Jadi, ketika saya awalnya menulis pertanyaan ini, saya tidak menyertakan detail penting. Saya tidak tahu pada saat itu bahwa perpustakaan yang saya gunakan ketika masalah ini muncul secara otomatis membungkus semua input dalam div. Saya tidak dapat menghapus perpustakaan karena sangat penting untuk proyek. Jadi saya menemukan cara untuk melakukan ini adalah jQuery dan saya pikir saya akan meletakkannya di sini jika ada orang di masa depan yang membutuhkannya.

$(document).ready(function () {
    $('.inputAnimator').focus(function () {
        $(this).closest('.section').find('.numeral').addClass('pulseAnimator');
    });
    $('.inputAnimator').blur(function () {
        $(this).closest('.section').find('.numeral').removeClass('pulseAnimator');
    });
});
form {
  display: flex;
  flex-direction: column;
}

input {
  width: 100%;
  margin: 10px 0 ;
}

.numeral {
  width: 25px;
  height: 25px;
  
  border-radius: 50%;
  background-color: #006da8;
  
  line-height: 25px;
  color: white;
  text-align: center;
}

.pulseAnimator {
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%,40% {
        box-shadow: 0 0 0 10px rgba(0, 109, 168, 0);
    }
    0% {
        box-shadow: 0 0 0 0px rgba(0, 109, 168, 0.5);
    }
    100% {
        box-shadow: 0 0 0 0px rgba(0, 109, 168, 0);
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <div class="section">
    <div class="numeral">1</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
  <hr />
  <div class="section">
    <div class="numeral">2</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
  <hr />
  <div class="section">
    <div class="numeral">3</div>
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="text" />
    <input class="inputAnimator" type="password" />
  </div>
</form>
0
emoore 7 November 2019, 21:05