On click form label moves up but when a user clicks out of the input field the label doesn't go back to normal

Question

Basically, I am creating a form where the user clicks into a field and the label repositions to the top of the field.

I can get the label to move up when a user clicks into the field but when a user clicks out the field, the label doesn't go back to this correct position.

$(".js-form-item").on("click", function() {
  $(this).addClass('form-item--input-filled');
});

.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

Thanks for your help in advance!

Cheers

Answer 1

Your code is ok, only change it similar this. It will works stylish!. simple and short:

$(".js-form-item").on("click", function() { $(this).addClass('form-item--input-filled'); })//exactly your code
.on("focusout",
    function(){
        $(this).removeClass('form-item--input-filled');
    }
);

---

Extra descriptions:

I have used focusout event that works fine always. I have tested it on my mobile and all things is fine.

Answer 2

Basically, you're not checking when shouldvthe label goes back to its default position. Logically that would be if the input field is empty the label goes back to its position. By attaching a blur event listener to the input field that has a class of .form-item__input then we can achieve the behaviour you want. So check this out:

$(".js-form-item").on("click", function () {
    $(this).addClass('form-item--input-filled');
});
$(".form-item__input").on("blur", function () {
    if($(this).val() === '') {
        $(this).parent('.js-form-item').removeClass('form-item--input-filled');
    }
});

.form-item {
    position: relative;
    margin-bottom: 1em;
    transition: color 0.4s ease;
    color: #b4b4aa;
}

.form-item--with-scaling-label label {
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    transform-origin: 0 0;
    z-index: 1;
    padding: 17px 20px;
    transition: transform 0.2s;
    transition-timing-function: ease-out;
}

.form-item__label {
    display: inline-block;
    font-weight: normal;
    vertical-align: middle;
    color: #b4b4aa;
    padding: 10px 10px 10px 0;
}

.form-text, .form-email, .form-password, .form-number, .form-select, .form-tel, .form-date, textarea {
    padding: 15px;
    border: 1px solid #d2d2c8;
    background-color: #fff;
    border-radius: 3px;
    background-clip: padding-box;
    width: 100%;
    transition: 0.1s all linear;
}

.form-item--with-scaling-label input, .form-item--with-scaling-label textarea {
    padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
    transform: translate3d(5px,-5px,0) scale3d(0.7,0.7,1);
}

<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
    <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
    <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

The label will get back to its default position only if the input field is empty, so if the input field has some value the label will stay on top.

Answer 3

Use .blur() and it will solve your issue.

$(".js-form-item").on("click", function() {
  $(this).addClass('form-item--input-filled');
});

$(".js-form-item > input").on("blur", function() {
  $(this).parent().removeClass('form-item--input-filled');
});

.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

But in my opinion you should use .focus() rather than your .click() function

$(".js-form-item > input").on("focus", function() {
  $(this).parent().addClass('form-item--input-filled');
});

$(".js-form-item > input").on("blur", function() {
  $(this).parent().removeClass('form-item--input-filled');
});

.form-item {
  position: relative;
  margin-bottom: 1em;
  transition: color 0.4s ease;
  color: #b4b4aa;
}

.form-item--with-scaling-label label {
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 1;
  padding: 17px 20px;
  transition: transform 0.2s;
  transition-timing-function: ease-out;
}

.form-item__label {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  color: #b4b4aa;
  padding: 10px 10px 10px 0;
}

.form-text,
.form-email,
.form-password,
.form-number,
.form-select,
.form-tel,
.form-date,
textarea {
  padding: 15px;
  border: 1px solid #d2d2c8;
  background-color: #fff;
  border-radius: 3px;
  background-clip: padding-box;
  width: 100%;
  transition: 0.1s all linear;
}

.form-item--with-scaling-label input,
.form-item--with-scaling-label textarea {
  padding: 21px 20px 10px 20px;
}

.form-item--with-scaling-label.form-item--input-filled label {
  transform: translate3d(5px, -5px, 0) scale3d(0.7, 0.7, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-item--with-scaling-label js-form-item form-item form-item-textfield">
  <label for="form-field-label" class="form-item__label font-weight-bold">First name</label>
  <input class="form-text form-item__input" type="text" id="form-field-id" name="form-field-name" value="" size="60" maxlength="128">
</div>

Hope this solved your issue.

Answer 4

In your case I think you don't need to track click outside the element, because you need an event when your input loses focus. For that you can add .blur() listener to your input and remove the class which you added previously.

https://api.jquery.com/blur/