CSS / Javascript (я думаю, Mootools).

Question

Меня попросили разместить форму на нашем веб-сайте, вы можете подумать, что просто, но у этого есть несколько классных маленьких js, чтобы сделать ярлык для ввода внутри себя, умный, но по какой-то причине не работающий какпредназначен на моей странице.

Он не размещает метку внутри поля ввода.Он использует JS для размещения метки и CSS для изменения цвета и тому подобное.

Вот пример jsFiddle .

А вот живой пример.

Спасибо всем за помощь:)

Answer 1

хотя вы можете сделать это, это не идеально.есть совершенно верный путь вперед с помощью улучшения ввода HTML5, известного как 'placeholder'.

Некоторое время назад я написал класс placeholder = "" для mootools, который, по сути, является прогрессивным улучшением для браузеров, в которых нет возможностей для 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 на наличие вилок), а Тьерри Бела сделал один (http://mootools.net/forge/p/placeholder)), и есть заполнитель Apple (http://demo.mootools.net/forge/p/apple_placeholder)

в любом случае, делайте это правильным образом, который будет наиболее совместимым и учитывающим долговечность (при обнаружении функций вашему javascript не нужно делать ничего идеального)