Utilisez EasyLinkr depuis votre iPhone!

Le 18 juillet 2008 • EasyLinkr • Mobile • Web • iPhone

Il n’est pas question d’une application à installer sur votre iPhone mais de la méthode à utiliser pour installer votre lien EasyLinkr sur votre iPhone (ou iPod Touch).

Méthode que votre retrouverez suite à la création de votre lien depuis votre iPhone.

1. Ajoutez cette page à vos signet.

2. Modifiez ce signet et enlevez, pour le lien, tout ce qui se trouve devant « javascript: » et enregistrez.

3. Vous pouvez désormais utiliser votre lien comme vous le faîtes depuis votre navigateur.

Quand vous êtes sur une page que vous souhaitez diffuser, allez dans vos signets et séléctionnez EasyLinkr.

3 commentaires

Champ de recherche parfait sans label ni bouton de validation

Le 10 août 2007 • Développement • WordPress

Tout d’abord ce mini tutoriel ne s’applique pas uniquement aux champs de recherches mais à tous les <input type= »text »/>. Pour mes exemples je vais partir du principe que l’on veut mettre en place un champ de recherche, sans label ni bouton de validation tout en faisant en sorte que cela reste compréhensible.
Pour éviter d’avoir juste ça :

Remplacer le label par le value

Dans tout formulaire qui se respecte on se doit d’avoir un champ label devant notre zone de saisie. Le but est de savoir ce que l’on doit y saisir!
Exemple :


<label for="inputid" >Recherche : </label><input type="text" id="inputid" />

Recherche :

En plus de ça, le but du label est de permettre, quand on clique dessus d’arriver directement dans la zone de saisie.Maintenant pour remplacer ce label il est possible d’utiliser le value.
Exemple :


<input type="text" value="Rechercher" />


Comme cela on comprend aussi bien ce que l’on attend de ce champ reste que si l’on clique dessus le texte « recherche » reste.

Gérer value et les clics

Le but maintenant est d’effacer le texte « Rechercher » lorsque l’on clic/arrive sur la zone de saisie.
Trop souvent l’on voit la solution « onclick » :


<input type="text" value="Rechercher" onclick="this.value=''" />


Elle peut sembler fonctionner mais en fait comme son nom l’indique, cela ne fonctionne que si l’on clic dessus. Si jamais on arrive sur cette zone via la touche de tabulation (TAB), rien ne se passe.
En fait, à la place d’utiliser « onclick » il faut utiliser « onfocus » :
<input type="text" value="Rechercher" onfocus="this.value=''" />


Allons plus loin

Histoire d’améliorer tout ça, ajoutons une autre fonctionnalité qui consiste à remettre le texte « Rechercher » si l’on quitte la zone de saisie sans la remplir.
Voici le code à utiliser :


<input type="text" value="Rechercher" onfocus="this.value=''" onblur="if(this.value=''){this.value='Rechercher';}" />


Maintenant le problème est que si l’on clic sur cette zone même si le texte est différent de « Rechercher » celui ci s’efface.
Il faut donc vérifier ce qui y est écrit, voici le nouveau code :
<input type="text" value="Rechercher" onfocus="if(this.value=='Rechercher'){this.value='';}" onblur="if(this.value=''){this.value='Rechercher';}" />


Le champ de recherche parfait

Selon moi… Le champ de recherche parfait ressemble à l’exemple précédent. Sauf que le texte « Rechercher » n’est pas suffisant, n’ayant pas de bouton de validation un message du genre « Entrer votre recherche et appuyez sur entrer » (me) semble être plus parlant.

Aussi si votre page accepte le php, comme la plupart maintenant, pour éviter d’avoir des erreurs de frappe qui feraient que rien de tout ça ne fonctionne, éviter d’avoir à tout changer les textes mais qu’un seul on peut utiliser une variable.
Comme ceci :


<?php $texterecherche = 'Entrer votre recherche et appuyez sur entrer'; ?>
<input type="text" value="<?php echo $texterecherche; ?>" onfocus="if(this.value=='<?php echo $texterecherche; ?>'){this.value='';}" onblur="if(this.value=''){this.value='<?php echo $texterecherche; ?>';}" />


Et pour WordPress?

Et bien oui, tant qu’à faire, maintenant voyons à quoi ressemble le champ de recherche parfait sous WordPress, sans utiliser le widget de recherche.


<?php $texterecherche = 'Entrer votre recherche et appuyez sur entrer'; ?>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" id="s" value="<?php if(isset($_GET['s'])) { echo wp_specialchars($s, 1); } else { echo $texterecherche; } ?>" size="15" onblur="if (this.value == '') {this.value = '<?php echo $texterecherche; ?>';}" onfocus="if (this.value == '<?php echo $texterecherche; ?>') {this.value = '';}" />
</form>


Voici le code que j’ai utilisé pour mon prochain thème WordPress en développement. Qu’est-ce que vous en pensez?

5 commentaires