Input Teks dengan Ikon Pembersih
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 Comments:
Ini diterapkan pada form komentar bisa gak kak ?
By IRIL SAGITA, at Tuesday, February 12, 2013 at 8:06:00 AM GMT+7
sepertinya tidak bisa, karena form komentar kan menggunakan iframe...
CMIIW :)
By Dixy, at Tuesday, February 12, 2013 at 4:33:00 PM GMT+7
bang, ko pas dicoba tampilan icon buat menghapusnya ora nongol ya ??
By Unknown, at Monday, April 1, 2013 at 6:04:00 PM GMT+7
JavaScript harus diletakkan setelah kode HTML, bukan sebelumnya.
By Taufik Nurrohman, at Tuesday, April 2, 2013 at 2:08:00 PM GMT+7
Apa bedanya sama tag <input type="reset"/>?
By budkalon, at Wednesday, May 1, 2013 at 8:33:00 PM GMT+7
Post a Comment
<< Home