CSS/Javascript (내가 생각하는 Mootools) 레이블 위치 지정자

Question

Google 웹 사이트에 양식을 배치하라는 요청을 받았지만 간단하게 생각할 수 있습니다. 그러나 여기에는 입력을위한 레이블을 내부에 넣을 멋진 작은 js가 있습니다. 그것은 영리하지만 어떤 이유로 내 페이지에서 의도 한대로 작동하지 않습니다.

레이블을 입력 필드에 배치하지 않습니다. JS를 사용하여 색상 변경 등을 위해 레이블과 CSS를 배치합니다.

Here is a jsFiddle example.

And here is the live example. 어떤 도움 :)

Answer 1

당신이 그것을 할 수 있지만에 대한

감사의 사람이,이 적합하지 않습니다. 'placeholder'로 알려진 HTML5 입력 개선을 통해 완벽하게 유효한 방법이 있습니다. 잠시 뒤 나는 기본적으로 HTML5 자리 능력이 부족 브라우저의 점진적 개선이다 Mootools의 자리 표시 자 = ""클래스를 썼다

(웹킷 아니라 글을 쓰는 시점을, 무엇이든)

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

바이올린 : http://jsfiddle.net/hFtNd/1/

클래스 자체 :

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(); 

및 스타일, 당신은 단지 HTML5 클래스 (공급 업체 특정 ATM)를 사용할 수 있습니다 다음 Mootools의 비슷한 솔루션에 대한보고가 위조 그래서

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

난 내 자신의 클래스를 포주하고처럼 보이게하지 않습니다, 나는 오스카를 알고 및 Seanmonstar는 한 하나 (http://demo.mootools.net/forge/p/mootools_placeholder - 자신의 포크에 대한 github의 확인)와 티에리 벨라는 (http://demo.mootools.net/forge/p/apple_placeholder)

어느 쪽이든, 그것을 대부분의 호환과 장수에 함께있을 것입니다 올바른 방법 일 (http://mootools.net/forge/p/placeholder)와 애플의 자리 거기 짓을 한거야 마음 (기능 탐지와 함께, 당신의 자바 스크립트는 이상적인 것을 할 필요가 없습니다)