CSS/Javascript (Mootools je pense) Label placer

Question

On m'a demandé de placer un formulaire sur notre site Web, simple que vous pourriez penser, mais celui-ci a quelques js cool en place pour faire l'étiquette pour l'entrée s'asseoir à l'intérieur il, intelligent mais pour une raison quelconque ne fonctionne pas comme prévu sur ma page.

Il ne place pas l'étiquette dans le champ de saisie. Il utilise le JS pour placer l'étiquette et CSS pour les changements de couleur et autres.

Here is a jsFiddle example.

And here is the live example.

Merci tout le monde pour toute aide :)

Answer 1

bien que vous pouvez le faire, ce n'est pas idéal. il y a une manière parfaitement valable d'avancer via une amélioration d'entrée de HTML5 appelée «placeholder».

un certain temps, j'ai écrit un espace réservé = « » class pour Mootools qui est essentiellement, une amélioration progressive pour les navigateurs qui ne disposent pas des capacités d'espace réservé HTML5 (au moment de l'écriture, tout ce qui est pas webkit)

http://fragged.org/mooplaceholder-input-placeholder-behaviour-class_1081.html

le violon: http://jsfiddle.net/hFtNd/1/

la classe elle-même:

var mooPlaceholder = new Class({ 
    // behaviour for default values of inputs class 
    Implements: [Options], 

    options: { 
     // default options 
     htmlPlaceholder: "placeholder", // the element attribute, eg, data-placeholder="MM/YY" -> "data-placeholder" 
     unmoddedClass: "unchanged", // apply a class to the unmodded input, say, to grey it out 
     parentNode: document, // limit to a particular set of child nodes 
     defaultSelector: "input[placeholder]" 
    }, 

    initialize: function(options) { 
     this.setOptions(options); 
     this.nativeSupport = 'placeholder' in document.createElement('input'); 
    }, 

    attachToElements: function(selector) { 
     // basic function example that uses a class selector to 
     var inputs = this.options.parentNode.getElements(selector || this.options.defaultSelector); 

     if (inputs.length) { 
      inputs.each(function(el) { 
       this.attachEvents(el); 
      }, this); 
     } 
    }, // end attachToElements 

    attachEvents: function(el, placeholder) { 
     // method that attaches the events to an input element. 
     var placeholder = placeholder || el.get(this.options.htmlPlaceholder); 
     if (this.nativeSupport || !$(el) || !placeholder || !placeholder.length) 
      return; 

     el.set("value", placeholder).store("placeholder", placeholder); 

     // append unmodded class to input at start 
     if (this.options.unmoddedClass) 
      el.addClass(this.options.unmoddedClass); 

     // now cater for the events 
     el.addEvents({ 
      change: function() { 
       // when value changes 
       var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); 
       if (value != placeholder) { 
        // once it changes, remove this check and remove the unmoddedClass 
        el.removeClass(this.options.unmoddedClass).removeEvents("change"); 
       } 
      }.bind(this), 

      focus: function() { 
       var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); 
       if (value == placeholder) { 
        el.set("value", "").removeClass(this.options.unmoddedClass); 
       } 
      }.bind(this), 
      blur: function() { 
       var value = el.get("value").trim(), placeholder = el.retrieve("placeholder"); 
       if (value == placeholder || value == "") { 
        el.set("value", placeholder).addClass(this.options.unmoddedClass); 
       } 
      }.bind(this) 
     }); 
    } 

}); 

new mooPlaceholder().attachToElements(); 

et le style, vous pouvez simplement utiliser les classes de html5 (fournisseur atm spécifique):

::-webkit-input-placeholder { 
    color: red; 
    font-weight: bold; 
} 

il ne semble pas que je suis proxénétisme ma propre classe, consultez des solutions similaires sur les Mootools forge, je sais Oskar et Seanmonstar a fait un (http://demo.mootools.net/forge/p/mootools_placeholder - vérifier github pour leurs fourches) et Thierry Bela ne l'un (http://mootools.net/forge/p/placeholder) et il y a l'espace réservé d'Apple (http://demo.mootools.net/forge/p/apple_placeholder)

de toute façon, faire de la bonne manière qui sera plus compatible et avec la longévité en esprit (avec la détection des caractéristiques, votre javascript n'a pas besoin de faire quoi que ce soit qui est idéal)