Effacer l'icône à l'intérieur du texte d'entrée

Existe-t-il un moyen rapide de créer un élément de texte d'entrée avec une icône à droite pour effacer l'élément d'entrée lui-même (comme le champ de recherche Google)?

J'ai regardé autour de moi mais je n'ai trouvé que comment mettre une icône comme arrière-plan de l'élément d'entrée. Existe-t-il un plugin jQuery ou autre chose?

Je veux l'icône à l'intérieur de l'élément de texte d'entrée, quelque chose comme:

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

Ajoutez un type="search"à votre entrée
Le support est assez correct mais ne fonctionnera pas dans IE <10

<input type="search">

Entrée effaçable pour les anciens navigateurs

Si vous avez besoin du support IE9, voici quelques solutions de contournement

En utilisant un standard <input type="text">et quelques éléments 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>

En utilisant uniquement un <input class="clearable" type="text">(aucun élément supplémentaire)

définir un class="clearable"et jouer avec son image d'arrière-plan:

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

Démo jsBin

L'astuce consiste à définir un rembourrage à droite (j'ai utilisé 18px) inputet à pousser l'image d'arrière-plan à droite, hors de vue (j'ai utilisé right -10px center).
Ce remplissage de 18 pixels empêchera le texte de se cacher sous l'icône (lorsqu'il est visible).
jQ ajoutera la classe x(si inputa une valeur) affichant l'icône d'effacement.
Maintenant, tout ce dont nous avons besoin est de cibler avec jQ les entrées avec class xet de détecter mousemovesi la souris est à l'intérieur de cette zone "x" de 18px; s'il est à l'intérieur, ajoutez la classe onX.
Cliquer sur la onXclasse supprime toutes les classes, réinitialise la valeur d'entrée et masque l'icône.

Gif 7x7px:

Chaîne en base64:

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

Pourrais-je suggérer, si vous êtes d'accord avec le fait que cela soit limité aux navigateurs compatibles html 5, en utilisant simplement:

<input type="search" />

Démo JS Fiddle

Certes, dans Chromium (Ubuntu 11.04), cela nécessite qu'il y ait du texte à l'intérieur de l' inputélément avant l'image / la fonctionnalité en texte clair n'apparaisse.

Référence:

• Plongez dans HTML 5: une forme de folie .
• type d'entrée = recherche - champ de recherche (NOUVEAU) HTML5 .

Vous pouvez utiliser un bouton de réinitialisation avec une image ...

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

Voyez-le en action ici: http://jsbin.com/uloli3/63

J'ai créé une zone de texte effaçable uniquement en CSS. Il ne nécessite aucun code javascript pour le faire fonctionner

ci-dessous est le lien de démonstration

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

Selon MDN , <input type="search" />est actuellement pris en charge dans tous les navigateurs modernes:

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

Cependant, si vous voulez un comportement différent qui soit cohérent entre les navigateurs, voici quelques alternatives légères qui ne nécessitent que JavaScript:

Option 1 - Toujours afficher le 'x': (exemple ici)

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>

Option 2 - Afficher uniquement le 'x' lorsque vous survolez le champ: (exemple ici)

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>

Option 3 - N'afficher le 'x' que si l' inputélément a une valeur: (exemple ici)

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>

Comme aucune des solutions volantes ne répondait vraiment à nos exigences, nous avons mis au point un simple plugin jQuery appelé jQuery-ClearSearch -

l'utiliser est aussi simple que:

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

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

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

EDIT: j'ai trouvé ce lien. J'espère que ça aide. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

Vous avez mentionné que vous le souhaitez à droite du texte d'entrée. Ainsi, le meilleur moyen serait de créer une image à côté de la zone de saisie. Si vous cherchez quelque chose à l'intérieur de la boîte, vous pouvez utiliser l'image d'arrière-plan, mais vous ne pourrez peut-être pas écrire un script pour effacer la boîte.

Alors, insérez et image et écrivez un code JavaScript pour effacer la zone de texte.

Si vous le souhaitez comme Google, sachez que le "X" ne se trouve pas réellement à l'intérieur du <input> - ils sont côte à côte avec le conteneur extérieur conçu pour apparaître comme la zone de texte.

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

Exemple: http://jsfiddle.net/VTvNX/

Quelque chose comme ça?? Démo 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>

Vous pouvez le faire avec ces commandes (sans 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>

Voici un plugin jQuery (et une démo à la fin).

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

Je l'ai fait principalement pour illustrer un exemple (et un défi personnel). Bien que les votes positifs soient les bienvenus, les autres réponses sont bien distribuées à temps et méritent leur reconnaissance.

Pourtant, à mon avis, c'est un ballonnement sur-conçu (à moins qu'il ne fasse partie d'une bibliothèque d'interface utilisateur).

J'ai écrit un composant simple en utilisant jQuery et bootstrap. Essayez-le: https://github.com/mahpour/bootstrap-input-clear-button

En utilisant un plugin jquery, je l'ai adapté à mes besoins en ajoutant des options personnalisées et en créant un nouveau plugin. Vous pouvez le trouver ici: https://github.com/david-dlc-cerezo/jquery-clearField

Un exemple d'utilisation simple:

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

Obtenir quelque chose comme ça:

jQuery Mobile a maintenant ceci intégré:

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

Documents TextInput de l'API Jquery Mobile

Pas besoin d'inclure des fichiers CSS ou image. Inutile d'inclure toute la bibliothèque d'interface utilisateur jQuery d'artillerie lourde. J'ai écrit un plugin jQuery léger qui fait la magie pour vous. Tout ce dont vous avez besoin est jQueryet le plugin . =)

Fiddle ici: démo jQuery InputSearch .