web-dev-qa-db-fra.com

Effacer l'icône dans le texte saisi

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

J'ai regardé autour de moi mais j'ai seulement trouvé comment mettre une icône en 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|
--------------------------------------------------
javascriptjqueryhtmlcss
161
Giovanni Di Milia

Ajouter un type="search" à votre saisie
Le support est plutôt correct mais ne fonctionnera pas dans IE <10 

<input type="search">

Séparable des anciens navigateurs

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

Utilisation d'un <input type="text"> standard et de certains é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>

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

Clear icon inside input element

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

L'astuce consiste à définir une certaine marge de remplissage droite (j'ai utilisé 18px) sur la input et à pousser l'image de fond à droite, à l'abri des regards (j'ai utilisé right -10px center).
Ce remplissage de 18 pixels empêchera le texte de se cacher sous l’icône (tant qu’il est visible).
jQ ajoutera la classe x (si input a une valeur) en affichant l'icône en clair.
Il ne reste plus qu'à cibler avec jQ les entrées de classe x et détecter sur mousemove si la souris est à l'intérieur de cette zone "x" de 18px; si à l'intérieur, ajoutez la classe onX.
Un clic sur la classe onX supprime toutes les classes, réinitialise la valeur d'entrée et masque l'icône.

7x7px gif: Clear icon 7x7

Chaîne base64:

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=
301
Roko C. Buljan

Pourrais-je suggérer, si vous êtes d'accord avec cela d'être limité aux navigateurs compatibles HTML 5, en utilisant simplement:

<input type="search" />

JS Fiddle démo

Certes, en chrome (Ubuntu 11.04), cela nécessite qu’il y ait du texte dans l’élément input avant l’image/fonctionnalité en texte clair apparaîtra.

Référence:

60
David Thomas

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>

Voir en action ici: http://jsbin.com/uloli3/6

26
KOGI

J'ai créé une zone de texte effaçable en CSS uniquement. 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

24
Shidhin Cr

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

input type=search

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

Toutefois, si vous souhaitez un comportement différent qui soit cohérent sur tous 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" lors du survol du 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'affichez le 'x' que si l'élément input 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>
20
Josh Crozier

Comme aucune des solutions proposées ne répondait vraiment à nos exigences, nous avons créé 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/

9
wldaunfr

Si vous le souhaitez comme Google, sachez que le "X" ne se trouve pas dans le <input> - ils sont côte à côte et le conteneur externe est stylé pour ressembler à 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/

3
Jonathan Lonowski

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

Vous avez dit que vous le voulez à droite du texte saisi. Donc, 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 une image d'arrière-plan, mais vous ne pourrez peut-être pas écrire de script pour effacer la boîte.

Donc, insérez une image et écrivez un code JavaScript pour effacer le champ de texte.

3
Jaspero
<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>
1
Juboraj Sarker

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

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

0
Ehsan Mahpour

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 d'être saluées.

Pourtant, à mon avis, il s'agit d'un gonflement excessif (à moins qu'il ne fasse partie d'une bibliothèque d'interface utilisateur).

0
Christian

jQuery Mobile a maintenant intégré ceci:

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

documents TextInput de l'API Jquery Mobile

0
user2217751

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:

enter image description here

0
David

Vous pouvez le faire avec ces commandes (sans Bootstrap).

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 teal;
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  
  color: teal;
  font-weight: bold;
  cursor: pointer;
}
<div>
  <input placeholder="Prueba" />
  <span>&#x2716;</span>
</div>
0
Andrés M. Jiménez

Pas besoin d'inclure des fichiers CSS ou image. Inutile d’inclure toute cette 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 jQuery et le plugin. =)

jQuery InputSearch sneak peek

Fiddle ici: démo jQuery InputSearch.

0
Glenn Mohammad