web-dev-qa-db-fra.com

Comment insérer un bouton clair dans ma zone de saisie de texte HTML, comme le fait l'iPhone?

Je veux avoir une jolie petite icône qui, quand on clique dessus, effacera le texte dans la case <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 en CSS sont faibles ... Voici un capture d'écran photo de l'apparence de l'iPhone.

javascriptiphonehtmlcss
107
Hugh Buchanan

@thebluefox a résumé le plus de tous. Vous êtes également obligé d'utiliser JavaScript pour que ce bouton fonctionne de toute façon. Voici un SSCCE, vous pouvez le copier/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, cela sépare bien la logique nécessaire à l'amélioration progressive de la source, vous pouvez bien sûr aussi utiliser plain 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 un HTML plus laid (et un JS non compatible avec le crossbrowser);).

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

89
BalusC

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

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

La plupart des navigateurs modernes généreront automatiquement un bouton vide utilisable dans le champ par défaut.

 plain HTML5 search input field

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

 bootstrap search input field

Les navigateurs Safari/WebKit peuvent également fournir des fonctionnalités supplémentaires lors de l’utilisation de type="search", tels que results=5 et autosave="...", mais ils remplacent également bon nombre de vos styles (hauteur, bordures, par exemple). 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".

107
Nick Sweeting

HTML5 introduit le type de saisie 'recherche' qui, je crois, fait ce que vous voulez.

<input type="search" />

Voici un exemple live .

35
ThorSummoner

Découvrez notre jQuery-ClearSearch plugin. 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/

24
wldaunfr

Vous ne pouvez malheureusement pas le placer dans la zone de texte, mais le faire ressembler à celui-ci, ce qui signifie malheureusement que certains fichiers CSS sont nécessaires: P

La théorie consiste à envelopper l'entrée dans une div, à supprimer toutes les bordures et les arrière-plans, puis à styler la div pour qu'elle ressemble à la boîte. Ensuite, déposez votre bouton après le champ de saisie dans le code et les tâches un peu plus.

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

16
Tom

Je pense que vous recherchez une solution créative 

$('#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>

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

3
Mahmoud Ali Kassem

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

Quoi qu’il en soit, pour un peu de plaisir en codage, j’ai pensé que cela pourrait également être réalisé en utilisant le bouton de réinitialisation du formulaire, et c’est le résultat qui fonctionne (cela vaut la peine de noter que ne peut pas vivre les autres entrées mais le champ de recherche avec cette approche, sinon le bouton de réinitialisation sera effacé. eux aussi), pas de 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>

0
TechNyquist

@Mahmoud ALi Kaseem

Je viens de changer un peu de CSS pour le rendre différent et ajouter 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>

0
Hiren