javascript 浏览器自动填充问题与输入焦点

8yparm6h  于 2023-11-15  发布在  Java
关注(0)|答案(4)|浏览(190)

我有一个登录表单,浏览器已经保存了用户登录详细信息。因此,当我在浏览器中打开此页面时,它会像这样显示

但当我点击页面或按下任何按钮时,



这是预期的默认行为。
我已经尝试

document.body.focus()

字符串
onload但这不起作用。
然后我将焦点放在其中一个输入上(名字上),但其他字段呢?对此最好的解决方案是什么?
我知道这个花哨的造型是不好的,但有解决办法吗?

qmelpv7a

qmelpv7a1#

我在使用React和样式化组件时遇到了这个问题。为了解决这个问题,我在我的样式化组件中使用了以下css(这是一个<label>):
input:-webkit-autofill + &
它的工作原理是检查输入中是否有自动填充,如果为true,则应用我们想要的样式。
注意:您可能需要将&替换为input

abithluo

abithluo2#

试试这个

.login-form{

  width: 50%;
  }

form div{
padding: 10px;
}

form div label, form div .fa{
color: blue;
}

个字符

bxpogfeg

bxpogfeg3#

您需要在Login表单的元素中添加activeclass:
举例来说:
第一个月
或者将下面的代码片段添加到css中:

input:-webkit-autofill { +label { @extend .active; } } }`

字符串
让我知道如果它工作,谢谢。

xqk2d5yq

xqk2d5yq4#

$(window).on('load', function (){
    setTimeout(function() {
        $('input:-webkit-autofill').each(function (){
            $(this).parent().addClass('focused');
        });
    }, 500);
});
.form-group.focused .floating-label {
    color: #7b7f82;
    font-size: 12px;
    left: 14px;
    opacity: 1;
    top: 8px;
}
<div class="form-group floating-group">
<label class="floating-label">tel</label>
<input type="text" name="telefon" id="telefon">
</div>

相关问题