时间戳

首页 > 解决方案 > 如果其他输入文本没有焦点并且具有价值但如果我集中并输入文本仍然存在，如何删除文本

javascript - 如果其他输入文本没有焦点并且具有价值但如果我集中并输入文本仍然存在，如何删除文本

问题描述

当我专注于输入时，我有一个电子邮件文本和一个跨度，跨度上升，我开始输入，但是当我停止输入时，电子邮件值仍然存在，跨度文本再次下降，因此它们相互溢出

所以我想在我仍然输入跨度文本时仍然在运行但当我完成我的电子邮件时跨度消失

.SignIn__Form__Email {
    margin: auto;
    position: relative;
    width: 50%;
}

.SignIn__Form__Email .SignIn__Email {
    width: 100%;
    outline: none;
    border: none;
    box-shadow: none !important;
}

.SignIn__Form__Email .floating-label {
    position: absolute;
    pointer-events: none;
    top: 5px;
    left: 10px;
    font-family: 'Baloo Tamma 2',
        cursive;
    transition: 0.2s ease all;
}

.SignIn__Form__Email input:focus~.floating-label,
.SignIn__Form__Email input:not(:focus):valid~.floating-label {
    top: 0px;
    left: 10px;
    font-size: 13px;
    opacity: 1;

}

.SignIn__Email:focus {
    font-size: 15px;
    padding: 15px 0px 10px 10px;
}

input::placeholder {
    font-size: 16px !important;
}

input:focus::placeholder {
    color: transparent;
}
<div className="SignIn__Form__Email">
      <input
         required
         className="SignIn__Email"
         type="email"
         placeholder="Email Address"
       ></input>
       <span className="floating-label">Email Address</span>
</div>

标签： javascripthtmlcss

解决方案

纯 CSS 方法

.SignIn__Form__Email {
    margin: auto;
    position: relative;
    width: 50%;
}

.SignIn__Form__Email .SignIn__Email {
    width: 100%;
    outline: none;
    border: none;
    box-shadow: none !important;
}

.SignIn__Form__Email .floating-label {
    position: absolute;
    pointer-events: none;
    top: 5px;
    left: 10px;
    font-family: 'Baloo Tamma 2',
        cursive;
    transition: 0.2s ease all;
}

.SignIn__Form__Email input:focus~.floating-label,
.SignIn__Form__Email input:not(:focus):valid~.floating-label {
    top: 0px;
    left: 10px;
    font-size: 13px;
    opacity: 1;

}

/* added here the :valid selector */
.SignIn__Email:focus, 
.SignIn__Email:valid {
    font-size: 15px;
    padding: 15px 0px 10px 10px;
}

input::placeholder {
    font-size: 16px !important;
}

input:focus::placeholder {
    color: transparent;
}
<div class="SignIn__Form__Email">
      <input
         required
         class="SignIn__Email"
         type="email"
         placeholder="Email Address"
       ></input>
       <span class="floating-label">Email Address</span>
</div>

试试这个。您可以从输入中删除 `placeholder` 属性。

除了那些"className"属性和一些"css"之外，我没有更改你的大部分代码。请注意，这仅在有人输入有效电子邮件时才有效，如果除了电子邮件之外还有任何其他内容时失败。如果您不仅要验证电子邮件，请pattern=".*\S.*"在输入中添加属性。这只会匹配任何内容，并且会阻止默认电子邮件验证。因此，在这种情况下，您将不得不求助于手动验证。

推荐阅读