Javascript Girl
  1. Javascript Girl
  3. Valeur par défaut claire
Intereting Posts
Comment fausser la réponse jquery.ajax ()? RequireJS ne fonctionne pas dans IE9 La superposition d'image Jquery? Comment appeler un fichier PHP à partir de HTML ou Javascript Comment cacher la colonne dans la table Google Maps Chart.js tableau de barres empilés et regroupés Quelle est la manière correcte de vérifier si une variable globale existe? Segmenter les réponses AJAX dans perl CGI? Pass JavaScript Variables tp PHP Controller dans Code Igniter Comment rendre le document pdf complet à l'aide de la bibliothèque pdf.js? POST à ​​PHP en utilisant AJAX et rafraîchir lors du changement OnYouTubeIframeAPIReady function is not calling Analysez un XML dans une base de données avec phonegap / Jquery / Ajax Console.log.appli ne fonctionne pas dans IE9 Uncaught TypeError: Impossible de lire la propriété 'apply' of indefined with phaser

Valeur par défaut claire

J'ai trouvé beaucoup d'exemples, mais j'essaie de trouver le moyen le plus simple d'effacer la valeur par défaut d'une entrée en cliquant dessus.

Ceci est pour une boîte de recherche. J'ai "Rechercher une publication" et je veux l'effacer en cliquant dessus.

J'ai essayé d'utiliser jquery mais pour une raison quelconque, cela ne fonctionne pas. 

$('#search').click(function() { if($(this).val() == 'Search for post') $(this).val(''); }); <input type="text" name="s" id="search" value="Search for post">

Quelqu'un peut-il penser à un code plus simple?

Il serait intéressant d'essayer ceci avec l'attribut d' placeholder html5. Cela fonctionnerait sur toutes les versions actuelles de Safari, Chrome et Firefox. 

 <input type="text" name="s" id="search" placeholder="Search for post"/>

Vous devez ensuite ajouter un code de recharge pour les navigateurs qui ne prennent pas en charge cette fonctionnalité. 

 $(function() { $(':input[placeholder]').each(function() { var me = $(this); me.val(me.attr('placeholder')) .focus(function() { var that = $(this); if (that.val() == that.attr('placeholder')) { that.val(''); } }).blur(function() { var that = $(this); if (that.val().trim().length == 0) { that.val(that.attr('placeholder')); } }); }); });

J'ai jeté un jsfiddle pour le tester. Il semble fonctionnel pour ceux qui le supportent, et d'autres aussi bon que possible pour les navigateurs comme IE 6.

http://jsfiddle.net/V2R9J/ (Note: J'ai changé la comparaison à une comparaison de chaîne vide uniquement pour qu'elle fonctionne. Vous pourriez / devrait utiliser votre propre fonction de trim ici).

Disclaimer: Cela ne fonctionnera pas pour les champs qui sont insérés via ajax. Vous pouvez essayer quelque chose en direct, ou vous pouvez appeler manuellement une méthode. Aussi – ça marche avec des champs de password de password , puisqu'il leur fera apparaître * ou un autre champ à puces, mais cela a déjà été un problème.

Ceci est assez expérimental, mais cela semble être une solution vraiment géniale qui permet aux utilisateurs qui utilisent les navigateurs les plus récents d'obtenir une fonctionnalité géniale dans html5, même si c'est simple.

Pour une entrée, vous souhaitez utiliser .focus()

Démo en direct: http://jsfiddle.net/rchern/aWdgZ/ 

 $('#search').focus(function() { $(this).val(''); $(this).unbind('focus'); });