Filigrane jQuery StackOverflow like?

Question

J'essaye d'implémenter quelque chose comme la fonctionnalité de filigrane de StackOverflow. Je suis en train d'utiliser jquery-watermark pour cela. Le problème que je rencontre est que le texte du filigrane disparaît à mesure que l'élément d'entrée gagne en focus, ce qui ne se produit pas ici dans SO (et je ne le veux pas dans mon implémentation non plus)

Y at-il une solution miracle? Je pourrais faire pour cela, ou peut-être une bibliothèque de tatouage comme SO-like?

Answer 1

Je suppose que vous voulez dire le texte de PlaceHolder qui est rendu dans les champs de saisie tant qu'aucune entrée n'a été entrée. Et vous voulez qu'il ne disparaisse qu'une fois que l'utilisateur entre un texte au lieu d'une fois qu'il concentre le champ?

a) Je découragerais cela. Je joue actuellement avec un jsFiddle pour mettre en œuvre cela et ce n'est pas trivial .. Et il y a le HTML5 Placeholder attribute que les navigateurs modernes rendront pour vous qui fournit cette fonctionnalité « native » ..

b) Il est un peu difficile . Mais here is the JSFiddle qui montre le code pertinent.

Voici le code de la Fiddle:

$("#item") 
    .addClass("watermark") 
    .val("Watermark") 
    .data('wm', true) 
    .focus(function() { 
     if ($(this).data('wm') === true) { 
      var that = this; 
      setTimeout(function() { 
       that.setSelectionRange(0,0); 
      }, 50); 
     } 
    }) 
    .keydown(function (evt) { 
     if ($(this).data('wm') === true) { 
      $(this).val($(this).val().replace('Watermark', '')); 
      $(this).data('wm', false); 
      $(this).removeClass('watermark'); 
     }  
    }) 
    .blur(function() { 
     if ($(this).val().length === 0) { 
      console.log("ran change"); 
      $(this) 
       .addClass("watermark") 
       .val("Watermark") 
       .data('wm', true); 

     } 
    }); 

Je suis assez sûr que le code peut encore être améliorée et peut-être mettre en son propre plugin jQuery .. Notez également que je n'ai pas testé si cela fonctionne sur IE .. (Et le Js a encore quelques valeurs codées en dur)

Answer 2

La méthode utilisée ici est assez astucieuse. La raison pour laquelle le texte ne disparaît pas est qu'il ne fait pas partie de l'élément input. Il y a un span suivant le champ de saisie et l'intervalle a le texte d'espace réservé. L'effet de "gradation" du texte d'espace réservé est obtenu en manipulant l'opacité de l'élément d'entrée.

• Lorsque le champ de saisie est flou et vide, il a une opacité de 40%. (La plage de l'espace réservé s'affiche assez bien.)

• Lorsque le champ de saisie est concentré et vide, il a une opacité de ~ 60%. (La plage de l'espace réservé est faiblement visible.)

• Lorsque le champ de saisie contient des données, il a une opacité de 100%. (Durée Placeholder ne transparaissent pas du tout.)

Personnellement, je suis favorable à une méthode qui utilise un attribut placeholder comme décrit par Tigraine. Même si le format HTML5 n'est pas finalisé, je préfère cela à un élément séparé contenant le texte. (Strictement parlant sur le langage HTML côté client.) À la réflexion, il ne se dégrade plutôt bien ...

Answer 3

j'ai écrit this JSFiddle pour une autre question, mais il fonctionne bien. Ce qu'il fait est de fournir un repli jQuery à l'attribut HTML5 placeholder, de manière aussi transparente que possible. Il fait même toute la chose "texte plus léger" lorsque le texte du filigrane est présent. J'espère que cela résout votre problème.

code du violon:

$(document).ready(function() { 
    $("input:text").each(function() { 
     $(this).data("placeholder", $(this).attr("placeholder")).addClass("placeholder"); 
    }); 

    $("input:text").live("focus", function() { 
     if($(this).val() == $(this).data("placeholder")) 
     { 
      $(this).val('').removeClass("placeholder"); 
     } 
    }); 

    $("input:text").live("blur", function() { 
     if(!$(this).val().length) 
     { 
      $(this).val($(this).data("placeholder")).addClass("placeholder"); 
     } 
    }); 
});