HTML5表单占位符回退,在Prototype中使用表单验证

Question

我的页面上有一个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:

不,我不想将输入类型设置为文本.这会将验证的行为从电子邮件语法更改为拼写检查.

Answer 1

用户现代化来检测对占位符的支持，并且仅在不存在支持时使用 JavaScript 来复制占位符文本：

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

这将阻止它在支持 html5 表单属性（如占位符）的浏览器上进行复制。