Giriş metninin içindeki simgeyi temizle

Giriş öğesinin kendisini (google arama kutusu gibi) temizlemek için sağda bir simgeyle giriş metin öğesi oluşturmanın hızlı bir yolu var mı?

Etrafa baktım ama sadece bir ikonun giriş elemanının arka planı olarak nasıl yerleştirileceğini buldum. Bir jQuery eklentisi veya başka bir şey var mı?

Giriş metin öğesinin içindeki simgeyi istiyorum, şuna benzer:

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

Bir ekleme type="search"girişinize
destek oldukça iyi ama olacak <10 IE çalışmıyor

<input type="search">

Eski tarayıcılar için silinebilir giriş

IE9 desteğine ihtiyacınız varsa , bazı geçici çözümler

Standart <input type="text">ve bazı HTML öğelerini kullanma:

/**
 * Clearable text inputs
 */
$(".clearable").each(function() {
  
  var $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});

/* Clearable text inputs */
.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}

<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Yalnızca a <input class="clearable" type="text">(Ek öğe yok) kullanma

a ayarlayın class="clearable"ve arka plan resmi ile oynayın:

/**
 * Clearable text inputs
 */
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();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server

/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.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 */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */

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


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsBin demosu

İşin püf noktası, bazı sağ dolguları (18px kullandım) inputve arka plan görüntüsünü sağa, göze çarpmadan (kullandım) itmektir right -10px center.
Bu 18 piksel dolgu, metnin simgenin altına gizlenmesini önler (görünür durumdayken).
jQ , temiz simgesini gösteren sınıfı x( inputdeğere sahipse) ekleyecektir .
Şimdi tek ihtiyacımız olan sınıf jQ ile girişleri hedeflemek ve fare bu 18px "x" alanı içinde olup olmadığını xtespit etmek mousemove; içerideyse sınıfı ekleyin onX. Sınıfı
tıklatmak onXtüm sınıfları kaldırır, giriş değerini sıfırlar ve simgeyi gizler.

7x7 piksel gif:

Base64 dizesi:

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

Bu html 5 uyumlu tarayıcılarla sınırlı iseniz, sadece şunu kullanarak önerebilir miyim?

<input type="search" />

JS Fiddle demosu

Kuşkusuz, Chromium'da (Ubuntu 11.04), bu , açık metin görüntüsü / işlevselliği görünmeden önceinput öğenin içinde metin olmasını gerektirir .

Referans:

• HTML 5'e dalın: Bir çılgınlık biçimi .
• girdi türü = arama - arama alanı (YENİ) HTML5 .

Bir resimle şekillendirilmiş bir sıfırlama düğmesi kullanabilirsiniz ...

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

Burada iş başında görün: http://jsbin.com/uloli3/63

Sadece CSS'de silinebilir bir metin kutusu oluşturdum. Çalışması için herhangi bir javascript kodu gerektirmez

demo linki aşağıda

http://codepen.io/shidhincr/pen/ICLBD

MDN'ye göre , <input type="search" />şu anda tüm modern tarayıcılarda desteklenmektedir:

<input type="search" value="Clear this." />

Ancak, tarayıcılar arasında tutarlı olan farklı davranışlar istiyorsanız, yalnızca JavaScript gerektiren bazı hafif alternatifler şunlardır:

Seçenek 1 - Her zaman 'x' göster: (burada örnek)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Always display the 'x':</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Seçenek 2 - Alanın üzerine geldiğinizde yalnızca 'x' değerini görüntüleyin: (burada örnek)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' when hovering over the field:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Seçenek 3 - Yalnızca inputöğenin değeri varsa 'x' değerini görüntüleyin: (burada örnek)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
  var input = el.querySelector('input');

  conditionallyHideClearIcon();
  input.addEventListener('input', conditionallyHideClearIcon);
  el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
    input.value = '';
    conditionallyHideClearIcon();
  });

  function conditionallyHideClearIcon(e) {
    var target = (e && e.target) || input;
    target.nextElementSibling.style.display = target.value ? 'block' : 'none';
  }
});

.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}

<p>Only display the 'x' if the `input` element has a value:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

Uçan çözümlerin hiçbiri gereksinimlerimizi gerçekten karşılamadığından, jQuery-ClearSearch adlı basit bir jQuery eklentisi bulduk -

kullanmak şu kadar kolaydır:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

Örnek: http://jsfiddle.net/wldaunfr/FERw3/

EDIT: Bu bağlantıyı buldum. Umarım yardımcı olur. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Giriş metninin sağında olmasını istediğinizden bahsettiniz. Bu nedenle, en iyi yol giriş kutusunun yanında bir görüntü oluşturmaktır. Kutunun içinde bir şey arıyorsanız, arka plan resmini kullanabilirsiniz, ancak kutuyu temizlemek için komut dosyası yazamayabilirsiniz.

Bu nedenle, metin kutusunu temizlemek için bir JavaScript kodu ekleyin ve resim yazın.

Google gibi olmasını istiyorsanız, o zaman "X" in aslında içinde olmadığını bilmelisiniz <input>- dış kap metin kutusu gibi görünecek şekilde tasarlanmışlardır.

HTML:

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

CSS:

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

Örnek: http://jsfiddle.net/VTvNX/

Böyle bir şey ?? Jsfiddle Demosu

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

Bu komutlarla (Bootstrap olmadan) yapabilirsiniz.

Array.from(document.querySelectorAll('.search-field')).forEach(field => {
  field.querySelector('span').addEventListener('click', e => {
    field.querySelector('input').value = '';
  });
});

:root {
  --theme-color: teal;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

div {
  position: relative;
}

input {
  background:none;
  outline:none;
  display: inline-block;
  width: 100%;
  margin: 8px 0;
  padding: 13px 15px;
  padding-right: 42.5px;
  border: 1px solid var(--theme-color);
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  color: var(--theme-color);
  font-weight: bold;
  cursor: pointer;
}
span:after {
  content: '\2716';
}

<div class="wrapper">
  <div class="search-field">
    <input placeholder="Search..." />
    <span></span>
  </div>
</div>

İşte bir jQuery eklentisi (ve sonunda bir demo).

http://jsfiddle.net/e4qhW/3/

Çoğunlukla bir örnek (ve kişisel bir meydan okuma) göstermek için yaptım. Upvotes açık olsa da, diğer cevaplar zamanında dağıtılıyor ve gerekli tanımayı hak ediyor.

Yine de, bence, aşırı tasarlanmış bir şişkinlik (bir UI kütüphanesinin parçası olmadıkça).

JQuery ve bootstrap kullanarak basit bir bileşen yazdım. Bir deneyin: https://github.com/mahpour/bootstrap-input-clear-button

Bir jquery eklentisi kullanarak, özelleştirilmiş seçenekler ekleyerek ve yeni bir eklenti oluşturarak ihtiyaçlarıma uyarladım. Burada bulabilirsiniz: https://github.com/david-dlc-cerezo/jquery-clearField

Basit bir kullanım örneği:

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

Bunun gibi bir şey elde etmek:

jQuery Mobile şimdi bu yerleşik:

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

Jquery Mobile API TextInput belgeleri

CSS veya resim dosyaları eklemenize gerek yoktur. Bu ağır topçu jQuery UI kütüphanesini eklemenize gerek yok. Senin için sihri yapan hafif bir jQuery eklentisi yazdım. İhtiyacınız olan tek şey jQueryve eklenti . =)

Burada keman yapın: jQuery InputSearch demosu .