Conseils de texte avec JQuery et JavaScript pour la boucle

Question

Je développe une petite application où je demande aux utilisateurs de mettre quelques informations. Je souhaite afficher des conseils de texte dans les champs de saisie. Je le fais dans une boucle ... Lorsque la page est chargée, les indications sont affichées correctement, mais rien ne se passe sur « focus » et « flou » des événements ...

Je me demande pourquoi, depuis quand je Je n'utilise pas de 'for loop' dans mon code js, tout fonctionne ...

D'ailleurs la raison pour laquelle j'utilise une boucle for est parce que je ne veux pas me répéter en suivant les principes 'DRY'. ..

Merci pour votre aide!

LP

Voici le code:

<script src="/javascripts/jquery.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    var form_elements = ['#submission_url', '#submission_email', '#submission_twitter'] 
var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)'] 

$(document).ready(function(){ 
    for(i=0; i<3; i++) { 
     $(form_elements[i]).val(text_hints[i]); 

      $(form_elements[i]).focus(function(i){ 
     if ($(this).val() == text_hints[i]) { 
     $(this).val(''); 
     } 
      }); 
      $(form_elements[i]).blur(function(i){ 
     if ($(this).val() != text_hints[i]) { 
     $(this).val(text_hints[i]); 
     } 
      }); 
     } 
    }); 
    </script> 

Answer 1

Je l'ai fait il y a un certain temps. il fera ce que vous voulez

Query.fn.waterMark = function(options) { 

     var defaults = { 
      activeColor: '#484646', 
      inActiveColor: '#8E8E8E' 
     }; 
     var settings = $.extend({}, defaults, options); 

     return this.each(function() { 
      var initVal = $(this).val(); 
      $(this).focus(function() { 
       if ($(this).val() === initVal) { 
        $(this).val('').css({ 'color': defaults.activeColor }); 
       } 
       else { return false } 
      }); 
      $(this).blur(function() { 
       if ($(this).val() === '' || $(this).val() === initVal) { 
        $(this).val(initVal).css({ 'color': defaults.inActiveColor }); 
       } 
       else { return false } 
      }); 
     }); 
    }; 

vous suffit d'utiliser comme

$(function() { 
     $('input').waterMark(); 
    }); 

il filigrane en lisant la valeur initiale. donc définissez votre entrée comme

<input type="text" value="Search here..." /> 

Answer 2

Guys! le script que j'ai écrit là-bas n'est pas celui que j'avais l'intention de poster ... Quoi qu'il en soit, j'ai écrit un autre script qui gère parfaitement ce que je voulais accomplir.

La voici!

À la votre!

<script src="/javascripts/jquery.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
    if (!Array.prototype.forEach) 
    { 
     Array.prototype.forEach = function(fun /*, thisp*/) 
     { 
     var len = this.length; 
     if (typeof fun != "function") 
      throw new TypeError(); 

     var thisp = arguments[1]; 
     for (var i = 0; i < len; i++) 
     { 
      if (i in this) 
      fun.call(thisp, this[i], i, this); 
     } 
     }; 
    } 

    var form_elements = ['#submission_url', '#submission_email', '#submission_twitter'] 
    var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)'] 

    $(document).ready(function(){ 
     form_elements.forEach(function(element, index, array){ 
      $(form_elements[index]).val(text_hints[index]); 

      $(form_elements[index]).focus(function(){ 
       if ($(this).val() == text_hints[index]) { 
        $(this).val(''); 
       } 
      }); 
      $(form_elements[index]).blur(function(){ 
       if ($(this).val() != text_hints[index] && $(this).val() != '') { 
        return; 
       } 
       else if ($(this).val() == '') { 
        $(this).val(text_hints[index]); 
       } 
      }); 
     }); 
    }); 

    </script>