html - 输入类型 "email"在:focus state时变为 "text"

Question

所以存在这个问题，当我在 :focus状态。它还在输入标签的末尾添加了 kl_ab.original_type="email"。这对我来说是个问题，因为我想让浏览器检查用户写的地址是否正确，所以当 email 的类型更改为 text 的类型时，写第一个字符就可以了正确的。为了制作更简单的图片，我将发布开发工具的两个屏幕截图，一个是电子邮件表单未获得焦点时的屏幕截图，第二个是处于 :focus 状态和代码当然。

未聚焦输入

以 :focus 状态输入

HTML 代码

<form action="#" class="form">
     <div class="form__group">
       <input type="email" class="form__input" placeholder="Email address" id="email" required>
       <label for="email" class="form__label">Email address</label>
     </div>  
</form>

SCSS 代码

.form {

  &__group:not(:last-child) {
    margin-bottom: 2rem;
  }


  &__input {
    font-size: 1.5rem;
    font-family: inherit;
    color: inherit;
    padding: 1.5rem 2rem;
    border-radius: 2px;
    background-color: rgba($color-white, .5);
    border: none;
    border-bottom: 3px solid transparent;
    width: 80%;
    display: block;
    transition: all .3;

   

    &:focus {
      outline: none;
      box-shadow: 0 1rem 2rem rgba($color-black, .1);
      border-bottom: 3px solid $color-primary;
    }

    &:focus:invalid {
      border-bottom: 3px solid $color-secondary-dark;
    }

    &::-webkit-input-placeholder {
      color: $color-grey-dark-2;
    }

  }

  &__label {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2rem;
    margin-top: .7rem;
    display: block;
    transition: all .3s;
  }

  &__input:placeholder-shown + &__label {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4rem);
  }
}

Answer 1

我知道这个问题的答案，因为同样的事情也发生在我身上

  kl_ab.original_type="email"

此属性会自动添加到输入标签的末尾，因为您已将 Kaspersky 防病毒扩展程序添加到您的浏览器。

Kaspersky 自动添加 kl_ab.original_type="email" 并将输入类型从 email 更改为 text。

从浏览器中禁用或删除 Kaspersky 防病毒扩展程序后，您将不会遇到此问题。