检查输入是否已填满

Question

I'm pretty new to Javascript and I have an issue checking if an input is filled or not.

So here is the problem : I have a label which is over the input ( position: absolute ). On focus and when the input is filled the label go to the top of the input. But if I remove the text on the input, the label stay on the top of the input.

So I need something to check if the input is filled but my solution isn't working. (the label should go back to the center of the input)

Any help will be appreciate :)

 document.querySelector('.form__input').addEventListener('blur', onInputBlur); function onInputBlur(ev) { if (ev.target && ev.target.value) { console.log('is-full'); ev.target.classList.add('input--filled'); } } 

 /* FORM WRAPPER */ .form__input--wrapper { width: 250px; position: relative; height: 2rem; margin: 3rem 0; } /* FORM INPUT */ .form__input { position: relative; background-color: transparent; width: 100%; margin: 0; height: 100%; padding: 0; border: 0; border-bottom: 1px solid deeppink; font-size: 15px; } .form__input:focus { outline: none; } .form__input:focus+.form__label, .input--filled+.form__label { top: -100%; align-items: flex-end; text-transform: uppercase; font-size: 11px; } .form__input:focus+.form__label::after, .input--filled+.form__label::after { width: 100%; bottom: calc(-100% - 0.2rem); } /* FORM LABEL */ .form__label { position: absolute; top: 0; left: 0; color: #404d5b; display: flex; align-items: center; transition: 0.3s; z-index: -1; line-height: 1; font-family: Raleway; font-weight: 500; font-size: 15px; height: 100%; width: 100%; } .form__label::after { width: 0; height: 0.2rem; background-color: deeppink; position: absolute; transition: 0.3s; content: ''; left: 0; bottom: -0.2rem; } 

 <form class="form-wrapper"> <div class="form__input--wrapper"> <input type="text" class="form__input"> <label for="name" class="form__label" id="a">My awesome label</label> </div> </form> 

Answer 1

Just remove the class in your event listener again.

 document.querySelector('.form__input').addEventListener( 'blur', onInputBlur ); function onInputBlur( ev ) { if(ev.target && ev.target.value) { console.log('is-full'); ev.target.classList.add('input--filled'); } else { console.log('is-empty'); ev.target.classList.remove('input--filled'); } } 

 /* FORM WRAPPER */ .form__input--wrapper{ width: 250px; position: relative; height: 2rem; margin: 3rem 0; } /* FORM INPUT */ .form__input{ position: relative; background-color: transparent; width: 100%; margin: 0; height: 100%; padding: 0; border: 0; border-bottom: 1px solid deeppink; font-size: 15px; } .form__input:focus{ outline: none; } .form__input:focus + .form__label, .input--filled + .form__label{ top: -100%; align-items: flex-end; text-transform: uppercase; font-size: 11px; } .form__input:focus + .form__label::after, .input--filled + .form__label::after{ width: 100%; bottom: calc(-100% - 0.2rem); } /* FORM LABEL */ .form__label{ position: absolute; top: 0; left: 0; color: #404d5b; display: flex; align-items: center; transition: 0.3s; z-index: -1; line-height: 1; font-family: Raleway; font-weight: 500; font-size: 15px; height: 100%; width: 100%; } .form__label::after{ width: 0; height: 0.2rem; background-color: deeppink; position: absolute; transition: 0.3s; content: ''; left: 0; bottom: -0.2rem; } 

 <form class="form-wrapper"> <div class="form__input--wrapper"> <input type="text" class="form__input"> <label for="name" class="form__label" id="a">My awesome label</label> </div> </form> 

Answer 2

You should add ev.target.classList.remove('input--filled'); if your field is empty

 document.querySelector('.form__input').addEventListener( 'blur', onInputBlur ); function onInputBlur( ev ) { if(ev.target && ev.target.value) { console.log('is-full'); ev.target.classList.add('input--filled'); } else { ev.target.classList.remove('input--filled'); } } 

 /* FORM WRAPPER */ .form__input--wrapper{ width: 250px; position: relative; height: 2rem; margin: 3rem 0; } /* FORM INPUT */ .form__input{ position: relative; background-color: transparent; width: 100%; margin: 0; height: 100%; padding: 0; border: 0; border-bottom: 1px solid deeppink; font-size: 15px; } .form__input:focus{ outline: none; } .form__input:focus + .form__label, .input--filled + .form__label{ top: -100%; align-items: flex-end; text-transform: uppercase; font-size: 11px; } .form__input:focus + .form__label::after, .input--filled + .form__label::after{ width: 100%; bottom: calc(-100% - 0.2rem); } /* FORM LABEL */ .form__label{ position: absolute; top: 0; left: 0; color: #404d5b; display: flex; align-items: center; transition: 0.3s; z-index: -1; line-height: 1; font-family: Raleway; font-weight: 500; font-size: 15px; height: 100%; width: 100%; } .form__label::after{ width: 0; height: 0.2rem; background-color: deeppink; position: absolute; transition: 0.3s; content: ''; left: 0; bottom: -0.2rem; } 

 <form class="form-wrapper"> <div class="form__input--wrapper"> <input type="text" class="form__input"> <label for="name" class="form__label" id="a">My awesome label</label> </div> </form> 

Answer 3

You have to remove the class if the the input is empty - see demo below:

 document.querySelector('.form__input').addEventListener('blur', onInputBlur); function onInputBlur(ev) { if (ev.target && ev.target.value.trim().length > 0) { ev.target.classList.add('input--filled'); } else { ev.target.classList.remove('input--filled'); } } 

 /* FORM WRAPPER */ .form__input--wrapper { width: 250px; position: relative; height: 2rem; margin: 3rem 0; } /* FORM INPUT */ .form__input { position: relative; background-color: transparent; width: 100%; margin: 0; height: 100%; padding: 0; border: 0; border-bottom: 1px solid deeppink; font-size: 15px; } .form__input:focus { outline: none; } .form__input:focus+.form__label, .input--filled+.form__label { top: -100%; align-items: flex-end; text-transform: uppercase; font-size: 11px; } .form__input:focus+.form__label::after, .input--filled+.form__label::after { width: 100%; bottom: calc(-100% - 0.2rem); } /* FORM LABEL */ .form__label { position: absolute; top: 0; left: 0; color: #404d5b; display: flex; align-items: center; transition: 0.3s; z-index: -1; line-height: 1; font-family: Raleway; font-weight: 500; font-size: 15px; height: 100%; width: 100%; } .form__label::after { width: 0; height: 0.2rem; background-color: deeppink; position: absolute; transition: 0.3s; content: ''; left: 0; bottom: -0.2rem; } 

 <form class="form-wrapper"> <div class="form__input--wrapper"> <input type="text" class="form__input"> <label for="name" class="form__label" id="a">My awesome label</label> </div> </form> 

Answer 4

you need a else to remove the class

 document.querySelector('.form__input').addEventListener( 'blur', onInputBlur ); function onInputBlur( ev ) { if(ev.target && ev.target.value) { console.log('is-full'); ev.target.classList.add('input--filled'); } else { console.log('is-empty'); ev.target.classList.remove('input--filled'); } } 

 /* FORM WRAPPER */ .form__input--wrapper{ width: 250px; position: relative; height: 2rem; margin: 3rem 0; } /* FORM INPUT */ .form__input{ position: relative; background-color: transparent; width: 100%; margin: 0; height: 100%; padding: 0; border: 0; border-bottom: 1px solid deeppink; font-size: 15px; } .form__input:focus{ outline: none; } .form__input:focus + .form__label, .input--filled + .form__label{ top: -100%; align-items: flex-end; text-transform: uppercase; font-size: 11px; } .form__input:focus + .form__label::after, .input--filled + .form__label::after{ width: 100%; bottom: calc(-100% - 0.2rem); } /* FORM LABEL */ .form__label{ position: absolute; top: 0; left: 0; color: #404d5b; display: flex; align-items: center; transition: 0.3s; z-index: -1; line-height: 1; font-family: Raleway; font-weight: 500; font-size: 15px; height: 100%; width: 100%; } .form__label::after{ width: 0; height: 0.2rem; background-color: deeppink; position: absolute; transition: 0.3s; content: ''; left: 0; bottom: -0.2rem; } 

 <form class="form-wrapper"> <div class="form__input--wrapper"> <input type="text" class="form__input"> <label for="name" class="form__label" id="a">My awesome label</label> </div> </form>