Input Teks dengan Ikon Pembersih

Tabel Konten
  1. HTML 
  2. CSS 
  3. JavaScript 
  4. Demo 
Text Input with Clear Button

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">&times;</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 = "";
    };
})();

Demo 

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"/>?

Komentar telah ditutup.