Apakah Anda tahu cara melakukan fungsi berikut di Bootstrap atau jQuery/JavaScript?

  • Status input default dengan teks placeholder (yaitu placeholder "Email")
  • Klik masukan itu
  • Mulai ketik alamat email Anda
  • Placeholder "Email" menghilang
  • Label "Email" muncul dan bergerak ke atas di atas alamat email yang diketik dan di dalam input

Default "Email" placeholder "Email" placeholder disappears, label appears and moves above the entered text

Anda dapat melihat demo ini di Shopify:

Inilah titik awal di Plunker:

https://plnkr.co/edit/bd9yGmgKfK53Tpn8rCSp?p=preview

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: none;
    }
  </style>
</head>

<body>
  <label>Email</label>
  <br />
  <input placeholder="Email" />
</body>

</html>

Setiap saran tentang cara mereplikasi fungsi ini sangat dihargai.

-1
Ryan 7 Agustus 2017, 16:40

2 jawaban

Jawaban Terbaik

Sayangnya, CSS saja tidak akan dapat melakukan trik karena Anda tidak dapat menargetkan input tergantung pada nilai sebenarnya. (Baca selengkapnya di sini Mendeteksi jika input memiliki teks di dalamnya menggunakan CSS -- pada halaman yang saya kunjungi dan tidak saya kontrol?)

Jadi triknya, diambil dari posting di atas, adalah mendengarkan acara input dan menambahkan kelas untuk menandai ketika input memiliki nilai. Anda harus menjalankan fungsi itu setelah halaman dimuat jika Anda kebetulan menunjukkan beberapa input dengan input yang sudah diisi sebelumnya.

Trik selanjutnya adalah menempatkan label di atas input dan memastikan input memiliki padding yang cukup sehingga kedua teks tidak tumpang tindih. Saya akan memberi Anda manfaat menatanya sesuai dengan kebutuhan Anda.

$('.labeled_input_group input').on("change keyup keydown",function(e){
  var elem = $(this);
  if(elem.val()){
     elem.closest('.labeled_input_group').addClass('hasValue');
  }else{
    elem.closest('.labeled_input_group').removeClass('hasValue');
  }
});
.labeled_input_group{
  position:relative;
}

label{
  display:none;
  position:absolute;
  top:0px;
  font-size:12px;
}
.labeled_input_group input{
  
}

.labeled_input_group.hasValue label{
  display:block;
}
.labeled_input_group.hasValue input{
  padding-top:14px;
  font-size:12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  
</head>

<body>
<div class="labeled_input_group">
  <label>Email</label>
  <input placeholder="Email"/>
  </div>
</body>

</html>
1
Salketer 7 Agustus 2017, 13:57

Untuk mereplikasi fungsi ini, Anda dapat menggunakan label dan elemen pembungkus (div). Berikan posisi relatif div dan pada label posisi absolut dan sejajarkan sehingga berada di atas input.

Kemudian Anda dapat menghubungkan jQuery (atau Vanilla JS juga akan baik-baik saja) dan mendengarkan acara focus dan blur. Saat input difokuskan, Anda dapat menambahkan label kelas lain, yang memindahkannya lebih jauh ke atas dan pada blur Anda harus memeriksa konten input melalui event.target.value, untuk melihat apakah itu kosong dan jika demikian, hapus kelas dari label yang membuatnya naik.

Harapan yang mengarahkan Anda ke arah yang benar.

Beberapa poin penting untuk dipertimbangkan, namun:

  • Input dapat diisi dengan cara lain (tanpa mendapatkan fokus), seperti melalui fungsi JavaScript lainnya. Anda harus memeriksanya juga, jika tidak, label akan menutupi teks.
  • Apakah ide yang baik untuk menghalangi label dengan cara ini? Dari sudut pandang UI/UX, bukanlah ide yang baik untuk meletakkan teks di tempat yang Anda harapkan pengguna juga meletakkan beberapa teks. Tampaknya masukan itu sudah diisi.
  • Dengan membuat label bergerak ke atas, Anda juga membuatnya lebih kecil, yang berarti akan kurang mudah diakses dan lebih sulit dibaca oleh banyak orang.
0
Dániel Emőd Kovács 7 Agustus 2017, 13:48