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

Question

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

所以我想当我仍然输入跨度文本时仍然向上但是当我完成我的 email 时跨度消失

 .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>

Answer 1

纯 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"之外，我没有更改你的大部分代码。 请注意，这仅在有人放置有效的 email 时才有效，并且如果除了 email 之外还有其他任何东西时，它就会失败。 如果您想验证的不仅仅是 email、go 在您的输入中添加pattern=".*\S.*"属性。 这将匹配任何内容，并会阻止默认的 email 验证。 因此，在这种情况下，您将不得不求助于手动验证。

Answer 2

如果要在焦点消失后删除元素跨度，可以使用focusout事件并从 DOM 中删除元素。 此外，您正在使用className但我想知道这段代码是否来自 React 组件。 看起来不像这样。

 let email_input = document.querySelector('.SignIn__Email'); if(email_input) { email_input.addEventListener('focusout', () => { email_input.parentNode.removeChild(document.querySelector('.floating-label')); }); }

 <div className="SignIn__Form__Email"> <input required class="SignIn__Email" type="email" placeholder="Email Address" ></input> <span class="floating-label">Email Address</span> </div>