Question

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

Answer 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]，textarea [placeholder]'替换'input [placeholder]'......实际上你不需要'占位符'类;）

通过jquery为opera实现placeholder =“”

1 个答案: