5

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

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

4

3 回答 3

4

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

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

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

于 2011-07-12T08:37:22.207 回答
1

尝试这个：

<input  type="email"   value="Enter Email" 
onfocus="if (this.value == 'Enter Email')  {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
于 2011-07-12T07:44:36.557 回答
0

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

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

希望能帮助到你。

于 2012-05-04T13:59:29.210 回答