Geek Answers Handbook

HTML5 form placeholder return with prototype form validation

I have an HTML5 form on my email input page that has the text of the place owner in it. This works great and I love my own check!

I'm not sure how to better serve older browsers. I use a little javascript that copies the placeholder text and prints it as a value. It works well, but then form validation is disabled because there is text that is not an email address on the form.

I do not want to lose verification. Any ideas?

HTML

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

JavaScript (prototype):

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:

Wouldn't it be great if browsers supporting substitute ignored the value attribute?

EDIT 2:

No, I do not want to set the type of input to the text. This will change the validation behavior from email syntax to spell checking.

+5
3

Modernizr, placeholder javascript , :

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

, html5, placeholder.

+4

:

<input  type="email"   value="Enter Email" 
onfocus="if (this.value == 'Enter Email')  {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
+1

, , , .

http://afarkas.github.com/webshim/demos/demos/webforms.html . jQuery Modernizer .

, .

0

More articles:


All Articles