Dalam ulasan kali ini saya tidak akan membahas bagaimana cara membuat search box tersebut, namun untuk kali ini saya akan memberikan sedikit tips dan trik bagi teman-teman yang ingin semakin memaksimalkan tampilan dari kotak pencarian atau search box kalian.
Tips kali ini yaitu berupa teks default yang muncul pada kotak pencarian ketika pertama kali laman di load, dan ketika kotak pencarian di klik, secara otomatis teks default tersebut akan hilang dan muncul kembali ketika kamu klik diluar kotak. Bagi teman-teman yang masih bingung dengan maksud saya diatas, bisa kalian lihat contohnya lewat gambar GIF berikut, atau langsung mencobanya dengan mengunjungi laman Demo berikut.
Langsung saja disimak berikut dibawah ini adalah dua macam code yaitu dengan menggunakan JavaScript dan JQuery, yang mana dapat kalian implementasikan untuk membuat teks default pada search box atau kotak pencarian dengan efek teks akan menghilang ketika di klik.
JavaScript <html>
<head>
</head>
<body>
<form method="get" action="">
<input type="text" name="search" id="search" value="" />
<input type="submit" name="submit" value="Search" />
</form>
<script type="text/javascript">
<!--
var defaultText = "Search...";
var searchBox = document.getElementById("search");
//default text after load
searchBox.value = defaultText;
//on focus behaviour
searchBox.onfocus = function() {
if (this.value == defaultText) {//clear text field
this.value = '';
}
}
//on blur behaviour
searchBox.onblur = function() {
if (this.value == "") {//restore default text
this.value = defaultText;
}
}
//-->
</script>
</body>
</html>
JQuery
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
var defaultText = "Ketik Judul Lagu atau Nama Penyanyi (Band)...";
var searchBox = $('#search2');
//set default text on load
searchBox.val(defaultText);
//on focus behaviour
searchBox.focus(function(){
if ($(this).val() == defaultText) {//clear text field
$(this).val('');
}
});
//on blur behaviour
searchBox.blur(function(){
if ($(this).val() == "") {//restore default text
$(this).val(defaultText);
}
});
});
//-->
</script>
</head>
<body>
<form method="get" action="">
<input type="text" name="search2" id="search2" value="" />
<input type="submit" name="submit" value="Ketik Judul Lagu atau Nama Penyanyi (Band)..." />
</form>
</body>
</html>
Untuk website demo yang kalian lihat, saya menggunakan pilihan code dengan JQuery. bisa dilihat pada kotak pencarian milik saya tersebut value atau teks default saya rubah menjadi "Ketik Judul Lagu atau Nama Penyanyi (Band)..." dan otomatis muncul pada load halaman pertama kali serta teks tersebut akan otomatis hilang ketika kotak pencarian diklik dan kembali muncul kembali ketika mouse diklik di luar kotak pencarian tersebut.
Secara detail code diatas dapat kalian modif dan kreasikan lagi disesuaikan dengan kebutuhan teman-teman sekalian. Bagi teman-teman yang menggunakan code JQuery, Library dari JQuery yang digunakan diatas dapat pula kalian simpan secara lokal (eksternal) tentunya dengan mengunduh dan menyimpan terlebih dahulu file jquery.min.js tersebut.
Sekian dahulu untuk ulasan saya kali ini, mohon maaf apabila masih ada kekeliruan baik dalam penulisan maupun teknis. Silahkan bagi teman-teman yang masih menemui kesulitan untuk mendiskusikannya dengan saya melalui kotak komentar dibawah ini, dan jangan lupa untuk selalu membagikan artikel yang bermanfaat kepada sesama lewat tombol share ke jejaring sosial yang ada dibawah ini.
→ Komentar yang menyertakan link aktif, iklan atau titip link akan dimasukan ke folder SPAM
→ Gunakan kode ini utk Emoticon (tanpa ♦)
:) ♦ :( ♦ ;) ♦ :p ♦ =( ♦ ^_^ ♦ :D ♦ =D ♦ |o| ♦ @@ ♦ :-bd ♦ :-d ♦ :ngakak: ♦ :lol: ♦ :love: