Запас заполнителя формы HTML5 с проверкой формы в Prototype - PullRequest
Новая
       21

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

5 голосов
/ 12 июля 2011

На моей странице есть форма 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'));

});

EDIT:

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

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

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

Ответы [ 3 ]

4 голосов
/ 12 июля 2011

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

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

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

1 голос
/ 12 июля 2011

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

<input  type="email"   value="Enter Email" 
onfocus="if (this.value == 'Enter Email')  {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
0 голосов
/ 04 мая 2012

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

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

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

...