Eğer giriş elemanı kendisi temizlemek için sağ tarafta bir simge (google Arama kutusu gibi) ile giriş metin bir öğe oluşturmak için hızlı bir yol olup olmadığını merak ediyorum.

Etrafında ama ben input öğesinin arka plan olarak bir simge koymak nasıl buldum baktım.

Bir jQuery eklentisi veya başka bir şey var mı?

teşekkürler

EDİT: giriş metin öğesi içinde . ikonu istiyorum

gibi bir şey

--------------------------------------------------
|                                               X|
--------------------------------------------------

<input type="search"> hala OS HTML5 uyumlu tarayıcılar bağlıdır.Aksi takdirde...

giriş için bir arka plan görüntüsü kullanarak:

jsBin demo

İhtiyacınız olan tüm 7 ** bir sınıf

<input class="clearable" type="text" name="" value="" placeholder="" />

bir WordPress kullanmak .clearable bizim diğer uygulanırCSSsınıflar:

.clearable{
  background: #fff url(icoX.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */

/ JQuery JS:

// CLEARABLE INPUT
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

Hile input bazı sağ doldurma (18px kullandım) ayarlayın ve arka plan resmi, manzara (right -10px center kullandım) bas etmektir.
Bu 18px doldurma metni simgesini (görünür iken) altına gizlemek önleyecektir.
uy sınıfı x input değeri varsa (Temizle) simgesini gösteren katacak.
Şimdi geriye sadece hedef ile uy girişleri ile sınıf x * mousemove eğer fare içinde 18px "x" alanı; eğer içeride, add sınıfı onX.
onX sınıfının tıklayarak tüm sınıfları kaldırır, giriş değeri sıfırlar ve simgesini gizler.

7x7px gif:

Base64 dize:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=