Form Label Appears Inside Input After Text is Entered

Question

Do you know how to perform the following functionality in Bootstrap or jQuery/JavaScript?

Default input state with placeholder text (i.e. "Email" placeholder)
Click that input
Start typing your email address
The "Email" placeholder disappears
An "Email" label appears and moves up above the typed email address and inside of the input

You can view a demo of this on Shopify:

Go to https://simpletheme.myshopify.com/collections/all/products/contrast-jacket?variant=335385313
Add to Cart
View Cart
Check Out
Enter an email address in the "Email" input

Here's a starting point on Plunker:

https://plnkr.co/edit/bd9yGmgKfK53Tpn8rCSp?p=preview

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: none;
    }
  </style>
</head>

<body>
  <label>Email</label>
  <br />
  <input placeholder="Email" />
</body>

</html>

Any advice on how to replicate this functionality is greatly appreciated.

Maybe because this can't be done with only CSS pseudo classes :( — Salketer, Aug 07 '17 at 13:45
The term that was coined for this a while ago is “floating labels”. (Luckily, googling for that term will bring up an article that explains the multiple usability issues with this as one of the first results ...) — CBroe, Aug 07 '17 at 13:47

score 1 · Accepted Answer · answered Aug 07 '17 at 13:57

Unfortunately, CSS only will not be able to do the trick as you cannot target inputs depending on their actual value. (Read more here Detect if an input has text in it using CSS -- on a page I am visiting and do not control?)

So the trick, taken from above post, is to listen on the inputs' events and add a class to mark when the input has value. You'd have to run that function once the page loads if you happen to show some inputs with pre-filled input.

The remainder of the trick is about placing the label above the input and making sure the input has enough padding so the two texts do not overlap. I'll let you the merit of styling it according to your needs.

$('.labeled_input_group input').on("change keyup keydown",function(e){
  var elem = $(this);
  if(elem.val()){
     elem.closest('.labeled_input_group').addClass('hasValue');
  }else{
    elem.closest('.labeled_input_group').removeClass('hasValue');
  }
});

.labeled_input_group{
  position:relative;
}

label{
  display:none;
  position:absolute;
  top:0px;
  font-size:12px;
}
.labeled_input_group input{
  
}

.labeled_input_group.hasValue label{
  display:block;
}
.labeled_input_group.hasValue input{
  padding-top:14px;
  font-size:12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  
</head>

<body>
<div class="labeled_input_group">
  <label>Email</label>
  <input placeholder="Email"/>
  </div>
</body>

</html>

score 0 · Answer 2 · answered Aug 07 '17 at 13:48

To replicate this functionality, you could use a label and a wrapper element (div). Give the div relative position and to the label an absolute position and align it so that it sits on top of the input.

Then you can hook up jQuery (or vanilla JS will also do fine) and listen for the focus and the blur events. When the input is focused, you can add the label another class, which moves it further up and on blur you should check the contents of the input via event.target.value, to see if it's empty and if so, remove the class from the label which made it move up.

Hope that points you in the right direction.

A few key points to consider, however:

Input can be filled in other ways (without gaining focus), like via another JavaScript function. You should check for that too, otherwise the label will cover the text.
Is it a good idea to obstruct the label this way? From a UI / UX point of view it is not a good idea to put text in a place where you expect the user to also put some text. It may seem as if that input had already been filled.
By making the label move up, you also make it smaller, which means it will be less accessible and harder to read for a lot of people.

Form Label Appears Inside Input After Text is Entered

2 Answers2