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

概述我的页面上有一个 HTML5表单,其中包含一个带有文本夹文本的电子邮件输入.它工作得很漂亮,我喜欢原生验证！ 我不确定如何最好地提供旧浏览器.我正在使用一些javascript复制占位符的文本并将其作为值进行打印.它运行良好,但随后表单验证会消失,因为文本中的文本不是表单中的电子邮件地址. 我不想失去验证..任何想法？ HTML <input id="email" type="email" pla 我的页面上有一个 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：

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

解决方法 用户 Modernizr检测占位符的支持,如果支持不存在,则仅使用JavaScript复制占位符文本：

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

这将阻止它在支持HTML5表单属性(如占位符)的浏览器上进行复制.

总结

以上是内存溢出为你收集整理的表单 – HTML5表单占位符回退,在Prototype中使用表单验证全部内容，希望文章能够帮你解决表单 – HTML5表单占位符回退,在Prototype中使用表单验证所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。