Comment puis-je mettre un bouton d'effacement dans ma zone de saisie de texte HTML comme le fait l'iPhone?

131

Je veux avoir une jolie petite icône qui, une fois cliquée, effacera le texte dans la zone <INPUT>.

C'est pour économiser de l'espace plutôt que d'avoir un lien clair en dehors de la zone de saisie.

Mes compétences CSS sont faibles ... Voici une capture d'écran de l'apparence de l'iPhone.

javascript iphone html css Hugh Buchanan
la source

Réponses:

93

@thebluefox a résumé le plus de tous. Vous n'êtes également obligé d'utiliser JavaScript que pour que ce bouton fonctionne de toute façon. Voici un SSCCE, vous pouvez le copier et le coller:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

Exemple en direct ici .

jQuery n'est d'ailleurs pas nécessaire, il sépare juste bien la logique nécessaire à l'amélioration progressive de la source, vous pouvez bien sûr également aller de l'avant avec du HTML / CSS / JS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

Vous vous retrouvez seulement avec du HTML plus laid (et JS non compatible avec les navigateurs;)).

Notez que lorsque le look'n'feel de l'interface utilisateur n'est pas votre principale préoccupation, mais que la fonctionnalité l'est, utilisez simplement à la <input type="search">place de <input type="text">. Il affichera le bouton Effacer (spécifique au navigateur) sur les navigateurs compatibles HTML5.

BalusC
la source
7
possible de masquer le bouton d'effacement lorsque le champ de texte est vide?
root le
Dans IE9, le texte flotte sous l'icône en forme de croix.
sedovav
depuis le changement de thème, l'url de l'image n'est plus correcte. l'ancienne image peut être consultée sur web.archive.org/web/20150101025546/http://cdn.sstatic.net/…
zacaj
1
Vous pouvez également utiliser des icônes géniales de polices avec class="fa fa-remove"sur la plage intérieure pour afficher une belle icône de croix
singe3
J'ai utilisé la version Javascript pur et cela a bien fonctionné, sauf pour centrer le bouton sur Win / Linux Firefox / Chrome. J'ai résolu cela en supprimant top:la plage enfant et en la définissant display: flex; align-items: center;dans la plage parent.
thomasa88
157

De nos jours, avec HTML5, c'est assez simple:

<input type="search" placeholder="Search..."/>

La plupart des navigateurs modernes afficheront automatiquement un bouton d'effacement utilisable dans le champ par défaut.

champ d'entrée de recherche HTML5 simple

(Si vous utilisez Bootstrap, vous devrez ajouter un remplacement à votre fichier css pour le faire apparaître)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

champ de saisie de recherche bootstrap

Les navigateurs Safari / WebKit peuvent également fournir des fonctionnalités supplémentaires lors de l'utilisation type="search", comme results=5et autosave="...", mais ils remplacent également plusieurs de vos styles (par exemple, la hauteur, les bordures). Pour éviter ces remplacements, tout en conservant des fonctionnalités telles que le bouton X, vous pouvez ajouter ceci à votre css:

input[type=search] {
    -webkit-appearance: none;
}

Voir css-tricks.com pour plus d'informations sur les fonctionnalités fournies par type="search".

Nick Sweeting
la source
3
Excellente réponse, aucun code impliqué. Malheureusement pas pris en charge par de nombreux navigateurs .. Nevermind, serait une fonctionnalité supplémentaire de Chrome dans mon produit :)
guillaumepotier
49

HTML5 introduit le type d'entrée «recherche» qui, selon moi, fait ce que vous voulez.

<input type="search" />

Voici un exemple en direct .

ThorSummoner
la source
4
Bien que le type 'recherche' soit pris en charge par tous les navigateurs récents (vérifiez le support ici: wufoo.com/html5), le bouton d'effacement n'est pas affiché dans Firefox (32.0.3) ou Opera (12.17).
justanotherprogrammer
9
le bouton d'effacement n'est pas non plus affiché dans la dernière version de Chrome
tsayen
3
Si vous utilisez Bootstrap, il peut remplacer le comportement par défaut
aexl
Le CodePen lié n'a pas la barre oblique de fermeture dans l'entrée, donc si vous voulez le voir fonctionner sur CodePen, ajoutez simplement la barre oblique de fermeture.
Gen1-1
@ Gen1-1 oups, on dirait que les téléchargements publics sont désactivés blog.codepen.io/2019/08/06/anonymous-pen-save-option-removed si quelqu'un a un stylo à code fixe, n'hésitez pas à modifier et à aider à corriger le démo
ThorSummoner
24

Découvrez notre plugin jQuery-ClearSearch . C'est un plugin jQuery configurable - l'adapter à vos besoins en stylisant le champ de saisie est simple. Utilisez-le simplement comme suit:

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

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

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

wldaunfr
la source
C'est génial, mais je conseillerais d'ajouter "$ (window) .resize (function () {triggerBtn ()});" dans jquery.clearsearch.js, juste après $ this.on ('keyup keydown change focus', triggerBtn); | Pour que les fenêtres de redimensionnement ne perturbent pas la position croisée
Ng Sek Long
17

Vous ne pouvez malheureusement pas le mettre à l'intérieur de la zone de texte, mais seulement le faire ressembler à son intérieur, ce qui signifie malheureusement qu'un certain css est nécessaire: P

La théorie consiste à envelopper l'entrée dans un div, à retirer toutes les bordures et tous les arrière-plans de l'entrée, puis à styliser le div pour qu'il ressemble à la boîte. Ensuite, déposez votre bouton après la zone de saisie dans le code et les jobs a good'un.

Une fois que vous l'avez fait fonctionner de toute façon;)

À M
la source
6

J'ai une solution créative que je pense que vous recherchez 

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>
Développer l'extrait

https://jsfiddle.net/qdesign/xn9eogmx/1/

Mahmoud Ali Kassem
la source
3

Bien sûr, la meilleure approche est d'utiliser le toujours plus pris en charge <input type="search" />.

Quoi qu'il en soit, pour un peu de plaisir de codage, je pensais que cela pourrait être réalisé également en utilisant le bouton de réinitialisation du formulaire, et c'est le résultat de travail (cela vaut la peine de noter qui ne peut pas vivre d'autres entrées mais le champ de recherche avec cette approche, ou le bouton de réinitialisation effacera eux aussi), aucun javascript nécessaire:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>
Développer l'extrait

TechNyquist
la source
1

Peut-être que cette solution simple peut vous aider:

<input type="text" id="myInput" value="No War"/><button onclick="document.getElementById('myInput').value = ''" title="Clear">X</button></input>
Développer l'extrait

Mehran Shagerdi
la source
Bien que ce code puisse fournir une solution au problème d'OP, il est fortement recommandé de fournir un contexte supplémentaire concernant la raison et / ou la manière dont ce code répond à la question. Les réponses au code uniquement deviennent généralement inutiles à long terme, car les futurs téléspectateurs rencontrant des problèmes similaires ne peuvent pas comprendre le raisonnement derrière la solution.
E. Zeytinci le
-1

@Mahmoud Ali Kaseem

Je viens de changer quelques CSS pour le rendre différent et j'ai ajouté focus ();

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>
Développer l'extrait

Hiren
la source