jQuery Tambah teks lalai ke kotak input carian

Meningkatkan kotak carian anda dengan jQuery: Panduan yang mudah namun berkesan! Tutorial ini menunjukkan cara menambah teks lalai ke kotak carian anda, menjadikannya lebih mesra pengguna. Penyelesaiannya memastikan teks lalai hilang pada klik, muncul semula apabila kotak kosong, dan memberikan maklum balas visual pada hover.

Lihat Demo Live

inilah kod JavaScript:

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

Kod jQuery ini menggunakan acara blur untuk memeriksa sama ada kotak carian kosong selepas pengguna berinteraksi dengannya. Jika kosong, ia menetapkan teks lalai.

Struktur HTML (tidak ditunjukkan secara terperinci) hanya harus mengandungi bentuk dengan medan input yang mempunyai "carian" id.

Gaya CSS di bawah memberikan peningkatan visual:

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

CSS ini mengawal kelegapan pada hover, menghilangkan gaya bentuk lalai, dan menetapkan dimensi dan gaya untuk medan input dan butang carian.

Soalan Lazim (Soalan Lazim) Mengenai Menambah Teks Lalai ke Input Carian

Bahagian ini menangani soalan umum mengenai menambah teks lalai ke medan input carian, yang meliputi pendekatan HTML dan CSS. Seksyen FAQ asal dikekalkan, tetapi diulang semula untuk kejelasan dan kesimpulan. Contoh kod khusus dimasukkan ke mana bermanfaat.

atribut tempat pemegang tempat html

Gunakan atribut HTML

untuk cara mudah untuk menambah teks lalai. Contohnya: . Teks pemegang tempat akan hilang sebagai jenis pengguna.

placeholder Teks Pemegang Sedang Styling dengan CSS <input type="search" placeholder="Enter search term...">

Kawal warna teks pemegang tempat menggunakan CSS:

Contoh ini menetapkan teks tempat ke Red. Ingat bahawa sokongan penyemak imbas untuk

berbeza -beza; Anda mungkin memerlukan awalan vendor untuk penyemak imbas yang lebih tua.

input::placeholder {
  color: red;
}

javascript untuk teks lalai ::placeholder

Walaupun atribut

sering mencukupi, anda boleh menggunakan JavaScript untuk menguruskan teks lalai secara dinamik. Contoh jQuery yang disediakan di atas adalah satu kaedah sedemikian.

Menambah ikon placeholder

Gunakan sifat CSS

dan

untuk menambah ikon dalam kotak carian.

background-image memperluaskan kotak carian pada fokus background-position

Gunakan kelas pseudo

dalam CSS untuk mengembangkan kotak carian apabila ia mendapat fokus:

:focus Styling Button Clear

input[type="search"]:focus {
  width: 200px;
}

Styling Butang yang jelas terbina dalam memerlukan CSS khusus penyemak imbas kerana unsur-unsur pseudo yang berbeza. Untuk penyemak imbas WebKit (Chrome, Safari), anda mungkin menggunakan:

borang penyerahan pada kunci masukkan

input[type="search"]::-webkit-search-clear-button {
  color: red;
}

Pastikan kotak carian berada dalam elemen

untuk menyerahkan borang secara automatik apabila kekunci Enter ditekan.

autofocus pada beban halaman

Gunakan atribut autofocus pada elemen <input> untuk memfokuskan kotak carian secara automatik apabila halaman beban: <input type="search" autofocus>.

Atas ialah kandungan terperinci jQuery Tambah teks lalai ke kotak input carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!