Question

我有一个UI，如果它们被聚焦或者内部有任何文本，则需要将一个类添加到输入容器中。我使用jQuery根据焦点状态添加/删除类，但是如果已经填充了值，脚本还需要在加载时运行一次。

jQuery(document).ready(function($){
    var $jsInputs = $('.js-input');

    // Listeners
    $jsInputs.on('focusin', function(e) {
        var $input = $(this),
            $parent = $input.parent();

        $parent.addClass('is-active');
    });

    $jsInputs.on('focusout', function(e) {
        var $input = $(this),
            $parent = $input.parent();

        if (!$input.val()) {
            $parent.removeClass('is-active');
        }
    });

    // Run once to check for input already present
    $jsInputs.each(function(i,e) {
        if ($(e).val()) {
            $(e).parent().addClass('is-active');
        }
    })
})

这适用于应用程序本身添加的值，但与浏览器自动填充的值相混淆。到目前为止，我已尝试等待window.onload并在输入上以编程方式触发focusin和focusout事件，但这些方法都没有检测到自动填充的文本。

有没有办法可靠地读取JS（vanilla或jQuery）中的自动填充值？禁用自动填充可能是最后的手段，但我真的不想从用户体验的角度去那里......

在javascript中读取自动填充的输入值

0 个答案: