Блог

Главная - Вопросы по программированию - как удалить текст, если другой вводимый текст не сфокусирован и не имеет значения, но если я фокусируюсь и набираю текст, он все еще там

как удалить текст, если другой вводимый текст не сфокусирован и не имеет значения, но если я фокусируюсь и набираю текст, он все еще там

#javascript #html #css

#javascript #HTML #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;

}

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

Ответ №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». Обратите внимание, что это работает, только если кто-то вводит действительное электронное письмо, и не удается, если есть что-то другое, кроме электронного письма. Если вы хотите проверить не только электронную почту, добавьте pattern=".*S.*" атрибут в свой ввод. Это просто будет соответствовать чему угодно и предотвратит проверку электронной почты по умолчанию. Итак, в этом случае вам придется прибегнуть к ручной проверке.

Ответ №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>