如何在表单自动填充时触发 Javascript 表单处理程序？

Question

我构建了一个类似于 Twitter 登录的表单，即。每个都有一个<span>标签<input>...然后在按键时，标签将其字体大小设置为 0。这是一个很酷的效果。

我注意到的问题是，如果您使用表单自动填充程序，则只有触发初始按键事件的表单才能正确为其标签设置动画 - 其他标签不会正确地设置动画，从而与输入的值重叠。

我的问题是......如何弥补这一点？当表单自动填充器输入输入值时会触发哪些事件，更具体地说，我将如何通过 jQuery 使用它们？

。。。

表格样本如下：

<div class="name">
    <input class="name" name="name" type='text' value="<?php echo $name; ?>">
    <span>Full Name</span>
</div>

。。。

下面的 jQuery 示例：

$(function(){
    // On document ready, check form fields
    $(':input').each(function() {
        if($(this).val() === "") {
            $(this).next('span').animate({fontSize:16},'fast');
        }
    });

    // On form focus, adjust colors
    $(':input').focus(function() {
        $(this).addClass('focus');
        $(this).next('span').addClass('focus');
    });

    // On keypress, remove label
    $(':input').keypress(function() {
        $(this).next('span').animate({fontSize:0},'fast',function(){
            $(this).hide();
        });
    });

    // On form blur, restore colors and label
    $(':input').blur(function() {
        $(this).removeClass('focus');
        $(this).next('span').removeClass('focus');
        if($(this).val() == '') {
            $(this).next('span').show().animate({fontSize:16},'fast');
        }
    });

    // Pass span 'click' event to input
    $('form span').click(function() {
        $(this).prev('input').trigger('focus');
    });
});

Answer 1

考虑使用https://github.com/tbosch/autofill-event库，它可以为您处理所有奇怪的浏览器情况。