Prototype中的HTML5表单占位符回退与表单验证

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：

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

- technopeasant

---

你是在编写自定义验证还是使用验证插件？ - kinakuta

不是，这是浏览器的本地验证。在这里阅读：http://diveintohtml5.org/forms.html - technopeasant

我对这个很熟悉 - 我以为你会为旧浏览器提供自己的验证，但是根据你的描述，我觉得我可能误解了问题。你使用JavaScript将占位文本放入输入字段中，但在支持HTML5的浏览器中，这会导致验证触发，因为它实际上不是一个电子邮件地址。 - kinakuta

没错！如果必要的话，我会把我的值/占位文本更改为“[e-mail]”。 - technopeasant

嗯，我觉得你不希望用户将占位文本留在那里，所以让它被验证捕获似乎是一件好事。 - kinakuta

这很不协调。如果无效，我已经设置了红色边框的CSS。不想以那种方式加载它。 - technopeasant

Answer 1

使用Modernizr来检测是否支持占位符，并且只有在不支持时才使用javascript复制占位符文本：

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

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

- kinakuta

---

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

最初不想使用Modernizr，因为它的体积和HTTP请求，但决定使用一个配置好的构建仅用于输入特性检测，并在文档底部的插件脚本文件中运行。由于这是占位符文本而不是实际元素，所以不必担心FOUC（http://paulirish.com/2009/avoiding-the-fouc-v3/）。哈利路亚！ - technopeasant

Answer 2

试试这个：

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

- web_ninja

---

如果输入类型设置为文本，则验证将进行拼写检查。我想保持电子邮件语法验证，因此类型必须保持为“email”。 - technopeasant

Answer 3

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

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

希望能对您有所帮助。

- elias