jQuery Girl
  1. jQuery Girl
  3. Faire en sorte que l’invite dans le champ de texte disparaisse / réapparaisse lorsque l’utilisateur tape / efface
Intereting Posts
jQuery Simple Spy ne fonctionne plus avec jQuery 1.5 Comment passer une variable javascript au contrôleur dans MVC à partir de View afficher des images en fonction de la largeur du navigateur FancyBox: obtenez une href pour les images via AJAX Comment obtenir le caractère voisin du texte sélectionné? jQuery et javascript simple: différences entre append et appendChild lors de la construction d’une arborescence DOM Bibliothèque de chaînes Javascript jQuery: Comment utiliser event.preventDefault () avec des événements personnalisés? Rejeter la promesse intérieure après la promesse initiale? Comment valider une date en utilisant 3 menus déroulants (jour, mois, année) en utilisant la validation jquery non intrusive Jquery File upload error lors de la soumission à ashx convertit la valeur de la chaîne textareas en un tableau JavaScript séparé par de nouvelles lignes jquery ajax $ .get résultat ne trouve pas la classe jQuery ajoute une balise de fermeture puis rouvre en utilisant .before () type d’entrée = image – onclick (), déclenchera son événement, mais n’agira pas correctement sur la fonction dans jquery

Faire en sorte que l’invite dans le champ de texte disparaisse / réapparaisse lorsque l’utilisateur tape / efface

Est-ce que quelqu’un sait comment puis-je faire un effet comme celui-ci dans ma barre de recherche: https://www.dropbox.com/help

Je parle d’effets onFocus et onBlur, le texte disparaissant et apparaissant de manière dynamic.

Merci les gars!

Ils utilisent CSS Animations sur la propriété color:

Extrait de leur main.css : 

 .sick-input.focused label{ color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 }

Vous pouvez imiter l’effet à l’aide du pseudo sélecteur :focus sur le champ de saisie avec les définitions mentionnées précédemment.

Si pour une raison quelconque je n’étais pas assez clair 🙂

http://jsfiddle.net/d9CMR/

Solution plus robuste:

http://jsfiddle.net/d9CMR/3/

Mise à jour (avec changement de couleur approprié):

http://jsfiddle.net/d9CMR/6/

La source:

HTML 

 ​

CSS 

 input { color:#333; } input:focus { color:#ccc;transition:color .2s linear 0; -webkit-transition:color .2s linear 0; -moz-transition:color .2s linear 0 } input.typing { color:#333; }​

Scénario 

 $(function(){ var input = $('input[name="input"]'), defaulttext = input.attr('data-default'); input.val(input.attr('data-default')); input.on('focus', function(){ if(input.val() != defaulttext) input.addClass('typing'); else input.removeClass('typing'); }).on('keydown', function(){ if(defaulttext == input.val()) input.val(''); input.addClass('typing'); }).on('blur', function(){ if(input.val() == '') input.val(defaulttext); that.removeClass('typing'); }); });

Essayez ceci – utilisez HTML et CSS sur le site Dropbox ….

HTML:

CSS: 

 .sick-input label { font-size: 16px; position: absolute; left: 8px; top: 6px; cursor: text; pointer-events: none; color: #777; } .sick-input.populated label { display: none; } input { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -moz-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; -webkit-box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; box-shadow: 0 0 0 #000, inset 0 3px 3px #eee; font-size: 16px; border: 1px solid #BFBFBF; padding: 5px; width: 500px; } .sick-input.focused label { color: #ccc; transition: color .2s linear 0; -webkit-transition: color .2s linear 0; -moz-transition: color .2s linear 0; }

JavaScript: 

 $('#search-input').keyup(function() { if ($(this).val() === '') { $('.sick-input').removeClass('populated'); } else { $('.sick-input').addClass('populated'); } }) $('#search-input').focus(function() { $('.sick-input').addClass('focused'); }); $('#search-input').blur(function() { $('.sick-input').removeClass('focused'); });

Exemple de travail ici

Voici un exemple:

HTML

CSS 

 body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; }

Javascript 

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } });

Et si vous ne voulez pas utiliser l’atsortingbut de placeholder utilisez ceci :

HTML

Javascript 

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { var $this = $(this); if($this.val() == $this.data('placeholder')) { $this.val(''); } }).on('blur', function(e) { var $this = $(this); if($this.val() == '') { $this.val($this.data('placeholder')); } }).data('placeholder', $('input').val());

Et si vous ne voulez pas utiliser l’atsortingbut value du champ de input , cela pourrait aider:

HTML

CSS 

 body { padding: 20px; } div { position: relative; } div label { position: absolute; left: 8px; top: 4px; color: #666; z-index: 2; font: 11px arial; } div input { position: absolute; padding: 3px 6px; border: 1px solid #ddd; border-radius: 2px; z-index: 1; font: 11px arial; } .populated label { display: none; } .focused label { color: #aaa; }

Javascript 

 $('input').on('keydown keypress keyup', function(e) { if($('input').val() == '') { $('div').removeClass('populated'); } else { $('div').addClass('populated'); } }).on('focus', function(e) { $('div').addClass('focused'); }).on('blur', function(e) { $('div').removeClass('focused'); });

Vous pouvez également utiliser l’atsortingbut html5 placeholder = “”, qui a un effet similaire .

Et utilisez une solution de remplacement jquery pour un navigateur plus ancien: https://github.com/mathiasbynens/jquery-placeholder

Pouvez-vous essayer ceci

Code Javascript 

 function txtblur() { document.getElementById('txtval').value=""; } function textblur() { document.getElementById('txtval').value="Enter word to search"; }

Code de zone de texte HTML

Vous pouvez également définir une image-object d’image d’arrière-plan contenant le texte souhaité dans le champ de saisie si la hauteur ou la largeur sont connues et ajuster la position de l’arrière-plan aux événements onfocus et onblur.