Hapus ikon di dalam teks input

Apakah ada cara cepat untuk membuat elemen teks input dengan ikon di sebelah kanan untuk menghapus elemen input itu sendiri (seperti kotak pencarian google)?

Saya melihat sekeliling tetapi saya hanya menemukan cara menempatkan ikon sebagai latar belakang elemen input. Apakah ada plugin jQuery atau yang lainnya?

Saya ingin ikon di dalam elemen teks input, seperti:

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

Tambahkan type="search"input Anda
. Dukungan ini cukup baik tetapi tidak akan berfungsi di IE <10

<input type="search">

Input yang dapat dihapus untuk browser lama

Jika Anda memerlukan dukungan IE9 di sini ada beberapa solusi

Menggunakan standar <input type="text">dan beberapa elemen HTML:

/**
 * 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>

Hanya menggunakan a <input class="clearable" type="text">(Tidak ada elemen tambahan)

atur class="clearable"dan mainkan dengan gambar latar belakangnya:

/**
 * 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>

Demo jsBin

Caranya adalah dengan mengatur beberapa padding kanan (saya menggunakan 18px) ke inputdan mendorong gambar latar kanan, keluar dari pandangan (saya menggunakan right -10px center).
Padding 18px itu akan mencegah teks bersembunyi di bawah ikon (saat terlihat).
jQ akan menambahkan kelas x(jika inputmemiliki nilai) yang menunjukkan ikon yang jelas.
Sekarang yang kita butuhkan adalah menargetkan dengan jQ input dengan kelas xdan mendeteksi mousemoveapakah mouse ada di dalam area 18px "x"; jika di dalam, tambahkan kelas onX.
Mengklik onXkelas menghapus semua kelas, mengatur ulang nilai input dan menyembunyikan ikon.

7x7px gif:

String Base64:

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

Bisakah saya menyarankan, jika Anda setuju dengan ini terbatas pada browser yang mendukung html 5, cukup gunakan:

<input type="search" />

Demo JS Fiddle

Harus diakui, di Chromium (Ubuntu 11.04), ini memang mengharuskan ada teks di dalam inputelemen sebelum gambar / fungsi teks yang jelas akan muncul.

Referensi:

• Dive Into HTML 5: Suatu bentuk Kegilaan .
• tipe input = pencarian - kolom pencarian (BARU) HTML5 .

Anda dapat menggunakan tombol reset yang ditata dengan gambar ...

<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>

Lihat beraksi di sini: http://jsbin.com/uloli3/63

Saya telah membuat kotak teks yang dapat dihapus hanya dengan CSS. Tidak memerlukan kode javascript untuk membuatnya berfungsi

di bawah ini adalah tautan demo

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

Menurut MDN , <input type="search" />saat ini didukung di semua browser modern:

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

Namun, jika Anda menginginkan perilaku berbeda yang konsisten di seluruh browser, berikut adalah beberapa alternatif ringan yang hanya memerlukan JavaScript:

Opsi 1 - Selalu tampilkan 'x': (contoh di sini)

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>

Opsi 2 - Hanya menampilkan 'x' saat melayang di atas bidang: (contoh di sini)

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>

Opsi 3 - Hanya menampilkan 'x' jika inputelemen memiliki nilai: (contoh di sini)

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>

Karena tidak ada solusi yang beterbangan memenuhi persyaratan kami, kami menghasilkan plugin jQuery sederhana bernama jQuery-ClearSearch -

menggunakannya semudah:

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

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

Contoh: http://jsfiddle.net/wldaunfr/FERw3/

EDIT: Saya menemukan tautan ini. Semoga ini bisa membantu. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Anda telah menyebutkan bahwa Anda menginginkannya di sebelah kanan teks input. Jadi, cara terbaik adalah membuat gambar di sebelah kotak input. Jika Anda mencari sesuatu di dalam kotak, Anda dapat menggunakan gambar latar belakang tetapi Anda mungkin tidak dapat menulis skrip untuk menghapus kotak.

Jadi, masukkan dan gambar dan tulis kode JavaScript untuk menghapus kotak teks.

Jika Anda menginginkannya seperti Google, maka Anda harus tahu bahwa "X" sebenarnya tidak ada di dalam <input> - mereka bersebelahan dengan wadah luar yang ditata agar tampak seperti kotak teks.

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;
}

Contoh: http://jsfiddle.net/VTvNX/

Sesuatu seperti ini?? Demo Jsfiddle

    <!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>

Anda dapat melakukannya dengan perintah ini (tanpa Bootstrap).

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>

Ini plugin jQuery (dan demo di bagian akhir).

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

Saya melakukan sebagian besar untuk menggambarkan contoh (dan tantangan pribadi). Meskipun upvotes diterima, jawaban lain diberikan tepat waktu dan layak untuk diakui.

Namun, menurut pendapat saya, itu adalah mengasapi over-engineered (kecuali itu membuat bagian dari perpustakaan UI).

Saya telah menulis komponen sederhana menggunakan jQuery dan bootstrap. Cobalah: https://github.com/mahpour/bootstrap-input-clear-button

Menggunakan plugin jquery saya telah menyesuaikannya dengan kebutuhan saya menambahkan opsi yang disesuaikan dan membuat plugin baru. Anda dapat menemukannya di sini: https://github.com/david-dlc-cerezo/jquery-clearField

Contoh penggunaan sederhana:

<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>

Memperoleh sesuatu seperti ini:

jQuery Mobile sekarang memiliki ini bawaan:

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

Jquery Mobile API TextInput docs

Tidak perlu menyertakan file gambar atau CSS. Tidak perlu menyertakan seluruh jQuery UI library artileri berat. Saya menulis plugin jQuery ringan yang melakukan keajaiban untuk Anda. Yang Anda butuhkan adalah jQuerydan plugin . =)

Biasakan di sini: Demo InputSearch jQuery .