admin 管理员组

文章数量: 1087134

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>

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>

  • javascript
  • html
  • css
  • flexbox
Share Improve this question edited Oct 13, 2017 at 14:55 kukkuz 42.4k6 gold badges64 silver badges102 bronze badges asked Aug 21, 2017 at 15:40 Victor AllegretVictor Allegret 2,4043 gold badges21 silver badges31 bronze badges 1
  • what is it doing wrong at the moment? – canaan seaton Commented Aug 21, 2017 at 15:42
Add a ment  | 

4 Answers 4

Reset to default 4

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>

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>

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>

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>

本文标签： javascriptCheck if an input is filled or notStack Overflow

版权声明：本文标题：javascript - Check if an input is filled or not - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744058964a2526367.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。