Nsryjdtyk

I am trying to create a material design inspired textbox.

I have read similar questions/answers around. However, my question is little different, so kindly read on.

Here is my stylesheet for the page -

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

 }

Here is the textbox which I am trying to create -

<div class='textBoxContainer'>

<input class='textbox' type="text" />

<label class='lbl'>

phone no....

</label>

</div>

It works fine like a material design inspired textbox, where the text moves up upon typing.

However, after the typing is done, if I move out of the textbox, then the label collapses back again on the textbox.

I was thinking 'input:valid' will help prevent it from happening, but it did not.
I can solve this with javascript, but is there a way around without using js?

I have also tried this putting a 'required' in the input filed, that did not help either.

Please let me know if I should explain any further.

I believe that would require to use javaScript. If you don't want to use javascript, just keep the label on top of the textField, or just use a placeholder.

The way to implement it using JavaScript that would be as follows:

Add a onfocusout event listener to all the textfields which you want that label to stay up.

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

Next, you have to create the function which gets called everytime the textField looses focus.

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);

    }

}

That function checks to see if the textField is empty. If it is, it removes the class of has-text, and if it has text, it adds the class of has-text.

Now in your css, you have to add has-text to all the styling you have for the label going up, like this:

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

 }

Let me know if this answers your question, and let me know if you need any more help.