当处于 :focus 状态时，输入类型“email”变为“text”答案

【问题标题】：Input type "email" change to "text" when it is in :focus state当处于 :focus 状态时，输入类型“email”变为“text”
【发布时间】：2021-02-05 17:40:53
【问题描述】：

所以有这个问题，我输入的"email" 类型在:focus 状态下更改为"text" 类型。它还在输入标签的末尾添加了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);
  }
}

【问题讨论】：

听起来好像有一些 JavaScript 干扰了您的输入。 Sass 和纯 HTML 在这里帮不了你。
我不知道这是否可能，因为这个项目是纯 HTML 和 Sass，所以没有单行 Javascript 代码。
您是否安装了任何浏览器扩展程序，例如安装了密码管理器？
是的，你完全正确。我有卡巴斯基保护扩展，我只是禁用它，问题不再出现。谢谢。
我有同样的问题，禁用卡巴斯基会解决这个问题，但这并不令人满意，因为我的网站用户可能有卡巴斯基扩展。我会报告，但想知道我现在如何解决它。

标签： html css sass

【解决方案1】：

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

  kl_ab.original_type="email"

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

卡巴斯基自动添加kl_ab.original_type=" email"，并将输入类型从email更改为text。

一旦您从浏览器中禁用或删除卡巴斯基防病毒扩展程序，您将不会遇到此问题。

【讨论】：