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

Posted 2023-03-05

【中文标题】在 Prototype 中使用表单验证的 HTML5 表单占位符回退

【英文标题】：HTML5 form placeholder fallback with form validation in Prototype

【发布时间】：2011-10-03 09:37:46

【问题描述】：

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

);

编辑：

如果支持 placeholder 的浏览器忽略 value 属性不是很好吗？

编辑 2：

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

【问题讨论】：

您正在编写此自定义验证还是使用验证插件？

也不是，它是浏览器的原生验证。在这里阅读：diveintohtml5.org/forms.html

我对此很熟悉 - 我假设您正在为旧浏览器提供自己的验证，但我认为我误解了您描述的问题。您使用 javascript 将占位符文本放在输入字段中，但在支持 html5 的浏览器中，这会导致触发验证，因为它实际上不是电子邮件地址？

没错！如果迫在眉睫，我会将我的值/占位符文本更改为“[e-mail]”

嗯，在我看来，您不希望用户将占位符文本留在那里，因此通过验证捕获它似乎是一件好事。

【参考方案1】：

用户 Modernizr 检测对占位符的支持，如果不存在支持，则仅使用您的 javascript 复制占位符文本：

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

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

【讨论】：

当前所有支持 HTML5 验证的浏览器也支持占位符属性（Opera 11+、Chrome 10+、FF4.0+、IE10 都支持；只有低于 11 的 Opera 才支持支持验证）。这意味着 kinakutas 代码应该有所帮助。如果不想使用 Modernizr 进行测试，可以如下代码：if( !'placeholder' in document.createElement('input') )

最初不想使用 Modernizr，因为它的重量和 http 请求，但决定使用配置构建仅用于输入功能检测，并在我的插件脚本文件中运行它的底部文件。不必担心 FOUC (paulirish.com/2009/avoiding-the-fouc-v3)，因为它是占位符文本，而不是实际元素。哈利路亚！

【参考方案2】：

试试这个：

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

【讨论】：

如果输入类型设置为文本，则验证是拼写检查。我想维护电子邮件语法验证，所以类型必须保持“电子邮件”

【参考方案3】：

我知道这是一个老问题，但它可以帮助遇到这个问题的其他用户。

您可以使用此http://afarkas.github.com/webshim/demos/demos/webforms.html 进行表单验证，并支持旧版浏览器。它位于 jQuery 和 Modernizer 之上，非常容易实现。

希望对你有帮助。