Je veux avoir une jolie petite icône qui, lorsque vous cliquez sur effacer le texte dans la zone .
Il s’agit de sauver l’espace plutôt que d’avoir un lien clair à l’extérieur de la zone de saisie.
Mes compétences en CSS sont faibles... Voici une photo de <strike>capture d’écran</strike> de l’apparence de l’iPhone.
@thebluefox a résumé la plupart de tous. Vous n'êtes obligés d'utiliser JavaScript pour que le bouton de travailler de toute façon. Voici un SSCCE, vous pouvez copier n' " coller'n'run:
<!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>
jQuery n'est d'ailleurs pas nécessaire, c'est juste bien sépare la logique nécessaire pour l'amélioration progressive, à partir de la source, bien sûr, vous pouvez aussi aller de l'avant avec la plaine 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 finit avec plus laide HTML (et non crossbrowser compatible JS ;) ).
Notez que lorsque l'INTERFACE utilisateur look'n'feel n'est pas votre plus grande préoccupation, mais la fonctionnalité est, alors il suffit d'utiliser <input type="search"> au lieu de <input type="text">. Il va montrer l' (navigateur) bouton effacer sur les navigateurs HTML5.
HTML5 introduit le type d’entrée « recherche » qui selon moi fait ce que vous voulez.
``
Voici un exemple de vivre.
Découvrez notre plugin JQuery-la méthode ClearSearch . C’est un plugin jQuery configurable - adapter à vos besoins de dénommer le champ de saisie est simple. Simplement l’utiliser comme suit :
Exemple : http://jsfiddle.net/wldaunfr/FERw3/
Vous ne peut pas mettre réellement à l’intérieur de la zone de texte malheureusement, seulement faire ressembler à son intérieur, ce qui signifie malheureusement certains css est nécessaire : P
La théorie est envelopper l’entrée dans un div, relever toutes les bordures et les arrière-plans au large de l’entrée, puis le style la div pour ressembler à la boîte. Puis, déposez dans votre bouton après l’entrée de la boîte dans le code et les emplois une good'un.
Une fois que vous avez réussi à travailler quand même ;)
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
