·

photo credit: The Lights via photopin (license)

Simple Focus Labels with JavaScript

Tags: ,

You might already have seen this design element here and there: input placeholder that transform into labels as soon as the input element gets focus or already has a value. This is a very simple solution for a misconception by a lot of designers. Consider the following form:
Screen Shot 2015-12-03 at 19.52.42
As a web developer, you probably have already seen this a thousand times: The designer uses the placeholder as a label. How cool this might look, there is a fundamental problem with this approach. As soon as the field is filled in, the input field loses it’s descriptive value, and the user doesn’t now what the input element is for. This can raise all kind of UX problems: what happens when the browser already pre-fills the fields (and has it wrong)? Or what if the user submits the form but gets an error but doesn’t know which field to edit?

UX Experts to the rescue!

Lucky for us, some clever UX experts thought of a way to still use a design as the one above, but provide a label as soon as the field gets content. The solution is quite simple actually, and it looks something like this:

Screen Shot 2015-12-03 at 19.47.45
Let me show you how this is done:

The HTML

The HTML is pretty straight forward, and it doesn’t require any extra stuff you would normally have when you create a form:

It’s just a simple form. The only thing you should notice here, is that each set of a label – and an input -element is wrapped in another element (in this example a p  and a span ). Also, note that I’m not using the placeholder -attribute.

The JavaScript

I love to write minimalistic, re-useable  JavaScript that only covers a single task. In this case, I created the JavaScript class FocusLabel , which takes a form and adds the ‘focus label’-functionality to all it’s underlying label/input-combinations.
Let’s have a look at the code first:

It’s a lot of commenting, but the code itself is very minimalistic. Let’s walk through the code step by step:

  1. The first thing the class does, is build a list of all labels in the form. It uses these labels to bind it’s magical functionality.
  2. On each found label, it checks if it has a corralling input -field and binds a function to it’s focus – and blur -events. We now have a method that is fired every time the field gets or loses focus.
  3. After binding these events, we fire this method once, to initialise the state of the label. This way we can tackle fields that already have a pre-filled value.
  4. And last but not least: the checkLabel() -method itself: the only thing this method does, is check if the input element is empty or not. If it’s not empty (or is focused at the moment) it gets the class ‘active’, otherwise the class gets removed.

CSS

You might have noticed that I’m not doing any animations whatsoever in the JavaScript. Of course not! This isn’t the 00’s! Nowadays we can use CSS transitions for this kind of stuff. In your CSS you can make your wrappers relative, and the labels absolute:

In this basic CSS setup, we position our label absolute and give him no pointer events. This way we mimic our label to be a placeholder. As soon as the parent of the label gets the ‘active’-class (which we saw earlier is done with JavaScript), a subtile transition is done.
And that’s it! Simple as that!

Example

And here’s a real-world example:

See the Pen Focus Labels by Giel Berkers (@kanduvisla) on CodePen.

Visitors give this article an average rating of 4.0 out of 5.

How would you rate this article?

Leave a Reply