Резервный заполнитель формы 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'));

});

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

Было бы здорово, если бы браузеры, поддерживающие заполнитель, игнорировали атрибут value?

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

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


validation forms html placeholder fallback
person technopeasant    schedule 12.07.2011    source источник
comment
Это пользовательская проверка, которую вы пишете, или вы используете плагин проверки?   -  person kinakuta    schedule 12.07.2011
comment
Нет, это собственная проверка браузера. Читайте здесь: diveintohtml5.org/forms.html   -  person technopeasant    schedule 12.07.2011
comment
Я знаком с этим - я предполагал, что вы предоставляете свою собственную проверку для старых браузеров, но я думаю, что неправильно понимаю проблему, как вы ее описываете. Вы используете javascript, чтобы поместить текст-заполнитель в поле ввода, но в браузерах, поддерживающих html5, это вызывает запуск проверки, потому что на самом деле это не адрес электронной почты?   -  person kinakuta    schedule 12.07.2011
comment
Точно! Если дело дойдет до драки, я изменю текст значения/заполнителя на [email protected].   -  person technopeasant    schedule 12.07.2011
comment
Что ж, мне кажется, что вы не хотите, чтобы пользователь оставлял этот текст-заполнитель там, поэтому то, что он был обнаружен проверкой, кажется хорошей идеей.   -  person kinakuta    schedule 12.07.2011
comment
Это визуально мешает. У меня установлен css для красной рамки, если он недействителен. Не хочу, чтобы он загружался таким образом.   -  person technopeasant    schedule 12.07.2011

Ответы (3)


arrow_upward
4
arrow_downward

Пользователь Modernizr определяет поддержку заполнителя и использует свой javascript для копирования текста заполнителя только в том случае, если такой поддержки нет:

if(!Modernizr.input.placeholder){
  // copy placeholder text to input
}

Это предотвратит копирование в браузерах, поддерживающих атрибуты формы html5, такие как заполнитель.

person kinakuta    schedule 12.07.2011
comment
Все современные браузеры, которые поддерживают проверку HTML5, также поддерживают атрибут заполнителя (Opera 11+, Chrome 10+, FF4.0+, IE10 поддерживают оба; только Opera младше 11 поддерживает только проверку). Это означает, что код kinakutas должен помочь. Если вы не хотите использовать Modernizr для тестирования, вы можете использовать следующий код: if( !'placeholder' in document.createElement('input') ){} - person alexander farkas; 12.07.2011
comment
Первоначально не хотел использовать Modernizr из-за его веса и HTTP-запроса, но решил использовать настроенную сборку только для обнаружения входных функций и запустил ее в моем файле сценария плагинов в нижней части документа. Не нужно было беспокоиться о FOUC (paulirish.com/2009/avoiding-the -fouc-v3), потому что это текст-заполнитель, а не фактический элемент. Аллилуйя! - person technopeasant; 12.07.2011

arrow_upward
1
arrow_downward

Попробуй это:

<input  type="email"   value="Enter Email" 
onfocus="if (this.value == 'Enter Email')  {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
person web_ninja    schedule 12.07.2011
comment
если тип ввода установлен как текст, проверка орфографии. Я хочу поддерживать проверку синтаксиса электронной почты, поэтому тип должен оставаться электронной почтой - person technopeasant; 12.07.2011

arrow_upward
0
arrow_downward

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

Вы можете использовать этот http://afarkas.github.com/webshim/demos/demos/webforms.html для проверки формы с поддержкой старых браузеров. Он расположен поверх jQuery и Modernizer и довольно прост в реализации.

Надеюсь, поможет.

person elias    schedule 04.05.2012