Input Teks dengan Ikon Pembersih
Tabel Konten
Pada peramban WebKit seperti Google Chrome dan Safari, sebuah elemen input bertipe search
memiliki kemampuan untuk menampilkan ikon/tombol pembersih kecil di samping input teks jika kita telah mengetikkan sesuatu di dalamnya. Tapi tidak pada peramban yang lain. Terkadang kita merasa butuh dan menyukai fitur itu, dan berharap bisa bekerja pada semua peramban.
Kita bisa menggunakan markup ekstra dan sedikit JavaScript untuk menciptakan rekayasa seperti itu. Tapi untuk memastikan tampilannya polos, gunakan elemen input bertipe text
, bukan search
:
HTML
<form id="search-form" action="/search" method="get">
<span class="text-input-wrapper">
<input type="text" name="q" size="18"><span title="Clear">×</span>
</span>
<input type="submit" value="Submit">
</form>
CSS
.text-input-wrapper {
border:1px solid;
background-color:white;
padding:1px 6px 1px 1px;
display:inline-block;
}
.text-input-wrapper input {
border:none;
background:none;
outline:none;
padding:0 0;
margin:0 0;
font:inherit;
}
.text-input-wrapper span {
cursor:pointer;
color:blue;
font-weight:bold;
visibility:hidden;
}
JavaScript
(function() {
var searchForm = document.getElementById('search-form'),
textInput = searchForm.q,
clearBtn = textInput.nextSibling;
textInput.onkeyup = function() {
// Show the clear button if text input value is not empty
clearBtn.style.visibility = (this.value.length) ? "visible" : "hidden";
};
// Hide the clear button on click, and reset the input value
clearBtn.onclick = function() {
this.style.visibility = "hidden";
textInput.value = "";
};
})();
5 Komentar
IRIL SAGITA
Ini diterapkan pada form komentar bisa gak kak ?
Dixy
sepertinya tidak bisa, karena form komentar kan menggunakan iframe...
CMIIW :)
Unknown
bang, ko pas dicoba tampilan icon buat menghapusnya ora nongol ya ??
Taufik Nurrohman
JavaScript harus diletakkan setelah kode HTML, bukan sebelumnya.
budkalon
Apa bedanya sama tag
<input type="reset"/>
?