HTML5 form placeholder fallback с проверкой формы в прототипе
У меня на странице есть форма 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:
Нет, я не хочу устанавливать тип ввода текста. Это изменит поведение проверки с синтаксиса электронной почты на проверку орфографии.
3 ответа:
Пользователь Modernizr чтобы обнаружить поддержку заполнителя и использовать javascript только для копирования текста заполнителя, если поддержка не существует:
if(!Modernizr.input.placeholder){ // copy placeholder text to input }
Это предотвратит его копирование в браузерах, поддерживающих атрибуты формы html5, такие как placeholder.
Попробуйте это:
<input type="email" value="Enter Email" onfocus="if (this.value == 'Enter Email') {this.value = '';}" onblur="if (this.value =='') {this.value = 'Enter Email';}" />
Я знаю, что это старый вопрос, но он может помочь другим пользователям, которые сталкиваются с этим вопросом.
Вы можете использовать это http://afarkas.github.com/webshim/demos/demos/webforms.html для проверки формы с поддержкой старых браузеров. Он находится на вершине jQuery и Modernizer и довольно прост в реализации.
Надеюсь, это поможет.