Comment puis-je mettre un bouton clair dans ma boîte de saisie de texte HTML comme l'iPhone?

Je souhaite avoir une jolie petite icône qui, lorsqu'elle est cliquée, effacera le texte dans la zone <INPUT>.

Il s'agit d'économiser de l'espace plutôt que d'avoir un lien clair en dehors de la zone de saisie.

Mes compétences en CSS sont faibles … Voici une ~~image d'écran~~ de la façon dont l'iPhone a l'air.

@ Thebluefox a résumé le plus souvent. Vous êtes seulement obligé d'utiliser JavaScript pour que ce bouton fonctionne de toute façon. Voici une SSCCE, vous pouvez copier ne pas l'extraire:

<!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('').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; } </style> </head> <body> <input type="text" class="deletable"> </body> </html>

Exemple en direct ici .

JQuery est en passant pas nécessaire, il sépare bien la logique nécessaire à l'amélioration progressive de la source, vous pouvez évidemment continuer avec 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; } </style> </head> <body> <span class="deleteicon"> <input type="text"> <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span> </span> </body> </html>

Vous ne finissez que par un HTML plus laid (et un JS non compatible avec le crossbrowser);)).

Notez que lorsque l'UI look'n'feel n'est pas votre plus grande préoccupation, mais la fonctionnalité est alors, utilisez simplement <input type="search"> au lieu de <input type="text"> . Il affichera le bouton clair (spécifique au navigateur) sur les navigateurs compatibles HTML5.

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

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

La plupart des navigateurs modernes rendront automatiquement un bouton clair utilisable dans le champ par défaut.

Champ de saisie de recherche HTML5

(Si vous utilisez Bootstrap, vous devrez ajouter une substitution à 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 lorsque vous utilisez type="search" , comme results=5 et autosave="..." , mais ils remplacent également plusieurs de vos styles (p. Ex. Hauteur, bordures). Pour éviter ces dépassements, tout en conservant des fonctions comme le bouton X, vous pouvez l'ajouter à votre css:

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

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

HTML5 introduit le type d'entrée «recherche» que je crois faire de ce que vous voulez.

<input type="search" />

Voici un exemple en direct .

Consultez notre plugin jQuery-ClearSearch . C'est un plugin jQuery configurable – l'adapter à vos besoins en coiffe le champ de saisie est simple. Utilisez-le comme suit:

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

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

Vous ne pouvez pas le mettre dans la boîte de texte malheureusement, ne faites que ressembler à son intérieur, ce qui signifie malheureusement que certains css sont nécessaires: P

La théorie est en train d'envelopper l'entrée dans un div, enleve toutes les frontières et les arrière-plans de la saisie, puis choisissez le div jusqu'à ressembler à la boîte. Ensuite, déposez votre bouton après la boîte de saisie dans le code et les travaux un bon.

Une fois que vous avez travaillé de toute façon;)

J'ai eu une solution créative, 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>

@Mahmoud Ali Kaseem

Je viens de changer de CSS pour que cela semble différent et ajoute 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>