Попытка создать дизайн материала, такого как текстовое поле, ошибка при проверке ввода

Question

Я пытаюсь создать текстовое поле, вдохновленное дизайном материала.

Я прочитал похожие вопросы / ответы вокруг.Однако мой вопрос немного отличается, поэтому, пожалуйста, продолжайте читать.

Вот моя таблица стилей для страницы -

.textBoxContainer{
height:50px;
position:relative;
margin:20px;
}

.textbox{
    border-bottom: solid 2px #984343;    
    border-top: none;
    border-left: none;
    font-family: Candara;
    width: 30%;
  }

.textbox + .lbl{
position:absolute;
top:0px;
left:0px;
transition:all .2s ease-out;
}

.textbox:focus{
 border-bottom: solid 2px #4CAF50;
  outline:none;    
}

 .textbox:focus + label, input:valid+label{
 top:-15px;
 font-size:10px;
 }

Вот текстовое поле, которое я пытаюсь создать -

<div class='textBoxContainer'>
<input class='textbox' type="text" />
<label class='lbl'>
phone no....
</label>
</div>

Он отлично работает, как текстовое поле, вдохновленное дизайном материала, где текст увеличивается при наборе текста.

Однако, после того, как набор текста завершен, если я выхожу из текстового поля, метка снова сворачивается в текстовое поле.

Я думал, что «input: valid» поможет предотвратить егослучилось, но это не так.Я могу решить эту проблему с помощью javascript, но есть ли способ обойтись без использования js?

Я также попытался это поместить «обязательный» в поле ввода, что тоже не помогло.

Пожалуйста, дайте мне знать, если я должен объяснить дальше.

Answer 1

Я считаю, что потребуется использовать javaScript. Если вы не хотите использовать javascript, просто оставьте метку поверх textField или просто используйте заполнитель.

Способ реализации этого с использованием JavaScript будет следующим:

Добавьте onfocusout прослушиватель событий ко всем текстовым полям, которые вы хотите, чтобы этот ярлык оставался активным.

<input class='textbox' type="text" onfocusout="leaveFocus(event)" />

Далее необходимо создать функцию, которая вызывается каждый раз, когда textField теряет фокус.

function leaveFocus(event) {

    const textField = event.target;
    // Check if textField is empty
    if (textField.value !== '') {
        textField.classList.add('has-text);
    } else {
        // Otherwise, textFiled has text
        textField.classList.remove('has-text);
    }
}

Эта функция проверяет, является ли textField пустым. Если это так, он удаляет класс has-text, а если он имеет текст, он добавляет класс has-text.

Теперь в вашем css, вы должны добавить has-text ко всем стилям, которые у вас есть для поднятия ярлыка, например:

.textbox:focus, .has-text{
     border-bottom: solid 2px #4CAF50;
     outline:none;    
}

 .textbox:focus + label, .has-text + label, input:valid+label{
     top:-15px;
     font-size:10px;
 }

Дайте мне знать, если это ответит на ваш вопрос, и дайте мне знать, если вам нужна дополнительная помощь.