Резервный вариант заполнителя формы HTML5 с проверкой формы в Prototype

У меня есть форма HTML5 на моей странице с вводом электронной почты, в котором есть текст-заполнитель. Он прекрасно работает, и мне нравится встроенная проверка!

Я не знаю, как лучше всего использовать старые браузеры. Я использую немного javascript, который копирует текст заполнителя и печатает его как значение. Он работает хорошо, но затем проверка формы прекращается, потому что в форме есть текст, который не является адресом электронной почты.

Я не хочу терять проверку .. Есть идеи?

HTML

<input id="email" type="email" placeholder="Enter your email address">

JavaScript ( Прототип):

var Placeholder = Class.create({
    initialize: function (element) {
        this.element = element;
        this.placeholder = element.readAttribute('placeholder');
        this.blur();
        Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this));
        Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this));
    },
    focus: function () {
        if (this.element.hasClassName('placeholder'))
            this.element.clear().removeClassName('placeholder');
    },
    blur: function () {
        if (this.element.value === '')
            this.element.addClassName('placeholder').value = this.placeholder;
    }
});
Event.observe(window, 'load', function(e){
    new Placeholder($('email'));

});

РЕДАКТИРОВАТЬ:

Разве не было бы замечательно, если бы браузеры, поддерживающие заполнитель, игнорировали атрибут значения?

РЕДАКТИРОВАТЬ 2:

Нет, я не хочу устанавливать текстовый тип ввода. Это изменит поведение проверки с синтаксиса электронной почты на проверку орфографии.

5
задан technopeasant 12 July 2011 в 07:50
поделиться