CSS/Javascript(我认为是Mootools)标签放置器

虽然你能做到,但这并不理想。有一个非常有效的方法通过HTML5输入改进称为“占位符”。

不久前,我为mootools编写了一个placeholder=“”类,它基本上是对缺乏HTML5占位符功能的浏览器的一种渐进增强(在撰写本文时,任何不是webkit的东西)

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):

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

所以它看起来不像我拉皮条我自己的类,有一个类似的解决方案在mootools福吉寻找,我知道奥斯卡和肖恩孟斯塔做了一个( http://demo.mootools.net/forge/p/mootools_placeholder -检查github的叉子)Thierry Bela做了一个( http://mootools.net/forge/p/placeholder )还有苹果的占位符( http://demo.mootools.net/forge/p/apple_placeholder )

不管是哪种方式,都要以最合适的方式进行,而且要考虑到使用寿命(通过特性检测,您的javascript不需要做任何理想的事情)