Shopify Question posted in
The Shopify help center can be found here.

Form Label Appears Inside Input After Text is Entered – Shopify

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

Default "Email" placeholder
"Email" placeholder disappears, label appears and moves above the entered text

You can view a demo of this on Shopify:

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.

Tags:

2

Answers


  1. 0

    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.
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search