javascript-通过jquery为Opera实现占位符=“”

我已经通过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('');
    });
});

这行得通,但又出现了另一个问题：如果表单客户端验证失败(由于必需属性或模式属性),则不会为字段重新赋予其占位符值.

那么,有没有办法(js事件？)来知道是否/何时客户端提交表单失败,所以我可以重新添加占位符？

测试案例：使用支持必需/模式但不支持占位符的浏览器打开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('');
        });
    });
});

最佳答案

阅读：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’类;)