通过jquery为opera实现placeholder=""答案

【问题标题】：Implementing placeholder="" for opera through jquery通过jquery为opera实现placeholder=""
【发布时间】：2010-02-16 14:21:24
【问题描述】：

我已经通过 jQuery 为不支持它的浏览器实现了placeholder HTML 5 attribute（目前除了 webkit）。

它确实很好用，但有一个小问题：它破坏了 Opera 上的 HTML 5 required="required" 和 pattern="pattern" 属性（它是目前唯一支持它们的浏览器）。

这是因为占位符值被临时设置为输入值，因此Opera在提交表单时认为输入实际上是用占位符值填充的。所以我决定在提交表单时删除占位符：

$('form').submit(function() {
    $(this).find(".placeholder").each(function() {
        $(this).removeClass('placeholder');
        $(this).val('');
    });
});

这可行，但出现了另一个问题：如果表单客户端验证失败（由于 required 或 pattern 属性），则不会重新赋予字段占位符值。

那么，有没有办法（js 事件？）知道表单提交是否/何时在客户端失败，以便我可以重新添加占位符？

测试用例：使用支持 required/pattern 但不支持占位符的浏览器打开this（目前仅支持 Opera）。尝试在不填写任何输入的情况下提交表单；你会看到当你做第二个输入时会丢失占位符。我不希望它发生。

这是完整的代码，但可能不需要：

function SupportsPlaceholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

$(document).ready(function() {
    if (SupportsPlaceholder())
        return;

    $('input[placeholder]').focus(function() {
        if ($(this).hasClass('placeholder')) {
            if ($(this).val() == $(this).attr('placeholder'))
                $(this).val('');
            $(this).removeClass('placeholder');
        }
    });

    $('input[placeholder]').keypress(function() {
        if ($(this).hasClass('placeholder')) {
            if ($(this).val() == $(this).attr('placeholder'))
                $(this).val('');
            $(this).removeClass('placeholder');
        }
    });

    $('input[placeholder]').blur(function() {
        if ($(this).val() != '')
            return;
        $(this).addClass('placeholder');
        $(this).val($(this).attr('placeholder'));
    });

    $('input[placeholder]').each(function() {
        if ($(this).val() != '' && $(this).val() != $(this).attr('placeholder'))
            return;
        $(this).val($(this).attr('placeholder')).addClass('placeholder');
    });

    $('form').submit(function() {
        $(this).find(".placeholder").each(function() {
            $(this).removeClass('placeholder');
            $(this).val('');
        });
    });
});

【问题讨论】：

标签： javascript jquery forms html validation

【解决方案1】：

阅读：http://dev.opera.com/articles/view/making-legacy-pages-work-with-web-forms/

我没有尝试，但您似乎可以通过这种方式检查表单有效性：

if (form.checkValidity ){// browser supports validation
    if( ! form.checkValidity()){ // form has errors,
        // the browser is reporting them to user 
        // we don't need to take any action

    }else{ // passed validation, submit now
        form.submit();
    }
}else{ // browser does not support validation
    form.submit();
}

或者简单地检查：element.validity.valid

顺便说一句。你也应该为 textarea 实现占位符 - 只需将 'input[placeholder]' 替换为 'input[placeholder], textarea[placeholder]'...实际上你不需要 'placeholder' 类；）

【讨论】：