Stop floating labels from resetting back to original position

Question

Background

I'm building a login form that has labels acting as placeholders. Why do you ask? Because they have to be translated and the JS can't target the placeholder or our developers don't know how. So, the labels move up when the input field takes focus. I have that much working. My problem is, after I write something in the input field, and go to the next, the input field loses focus and the labels go back to where they were when they were placeholder wannabes.

So, my question is:

Is there a Javascript (jQuery is fine) that will detect content in the input field and based on that information, leave the labels in the top where they just moved to?

Keep in mind, it should be driven by content inside the input, because if the user click in the input types something but deletes it, or simply tabs through it, I do want the label to go back to be a place holder. This part may not make much sense in a login form because both fields are obviously required, but if this works correctly, I want to use it accross the site. It is a good UX concept.

This is what I have.

HTML

<div class="container">
    <div class="col-xs-4 col-xs-push-4 martop50">
        <div class="login-content">
            <h4 class="text-center m-t-0 m-b-20">Great to have you back!</h4>
            <form action="home.html" method="POST" name="login_form" class="form-input-flat">
                <div class="form-group">
                    <div class="float-labels">
                        <div class="input-group">
                            <span class="input-group-addon left"><i class="fa fa-fw fa-lg fa-user"></i></span>
                            <input type="text" class="form-control input-lg">
                            <label for="user">Username</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-labels">
                        <div class="input-group">
                            <span class="input-group-addon left"><i class="fa fa-fw fa-lg fa-lock"></i></span>
                            <input type="password" class="form-control input-lg">
                            <label for="user">Password</label>
                        </div>
                    </div>
                </div>
                <div class="row m-b-20">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-default btn-lg btn-block">Sign in to your account</button>
                    </div>
                </div>
                <div class="text-center">
                    <small>Problems loging in? </small><a href="register.html" class="text-muted">Contact Support</a>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

.martop50 {
    margin-top: 50px;
}

.login-content, .login .login-content {
    padding: 25px 30px;
    -webkit-border-radius: 0 0 8px 8px;
    -moz-border-radius: 0 0 8px 8px;
    -ms-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    background: #101113;
    box-shadow: 0 2px 0 #000;
}

h4{
    color: rgba(248,151,29,0.77);
}
.form-input-flat .input-group-addon.left {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbb;
    border-right: none;
    -webkit-border-radius: 50% 0 0 50%;
    -moz-border-radius: 50% 0 0 50%;
    -ms-border-radius: 50% 0 0 50%;
    border-radius: 50% 0 0 50%;
    padding: 8px 10px 5px 13px;
}
.form-input-flat .input-group-addon {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbb;
    border-left: none;
    -webkit-border-radius: 0 50% 50% 0;
    -moz-border-radius: 0 50% 50% 0;
    -ms-border-radius: 0 50% 50% 0;
    border-radius: 0 50% 50% 0;
    padding: 0 13px 0 10px;
}

.input-group .form-control:not(:first-child):not(:last-child), .input-group-addon:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0 34px 34px 0;
}

.form-control {
    border-width: 2px;
    border-color: #8f8f8f;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #bbb;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    -ms-border-radius: 34px;
    border-radius: 34px;
    background: #211E1E;
}

.float-labels label {
    font-size: 15px;
    line-height: 18px;
    font-weight: 500;
    position: absolute;
    z-index: 2;
    left: 65px;
    top: 35px;
    padding: 0 2px;
    pointer-events: none;
    background: transparent;
    -webkit-transition: -webkit-transform 100ms ease;
    -moz-transition: -moz-transform 100ms ease;
    -o-transition: -o-transform 100ms ease;
    -ms-transition: -ms-transform 100ms ease;
    transition: transform 100ms ease;
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
label {
    color: #bbb;
}

.float-labels input:focus {
  border-color: #ccc;
  box-shadow: none;
}
.float-labels input:focus + label, 
.float-labels input:invalid + label  {
  color: rgba(248, 151, 29, 0.77);
  -webkit-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  top: 14px;
  background: #211E1E;
}

And a handy dandy codepen

you can "abuse" the `required` attrib and `:invalid` to distinguish between empty and filled inputs, but it looks like you're using :invalid for other things.. — dandavis, Jan 10 '16 at 23:18
That was my original idea. That's why you're seeing it. But I must be doing it wrong lol — LOTUSMS, Jan 10 '16 at 23:22
ohh, i think i got it: http://codepen.io/anon/pen/ZQyYEb with `, :valid + label ` — dandavis, Jan 10 '16 at 23:23
AH! AWESOME!!!! Well...what you're waiting for big boy? Answer the question so I can give you credit lol — LOTUSMS, Jan 10 '16 at 23:25
@dandavis well, bad news. It didn't work in my site. Obviously something else must be breaking it. Not sure what. But I did look at the inspector and noticed the :valid state is defaulted even when the input is empty. No errors in the console. I still think JS is my money maker here — LOTUSMS, Jan 10 '16 at 23:55
i also commented out the other :invalid rule you had, since it doesn't appear to able able to be used anyway. — dandavis, Jan 10 '16 at 23:56

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

Possible duplicate of Detect if an input has text in it using CSS -- on a page I am visiting and do not control?.

Here is the solution in your pen, given you want to use this "invalid hack" :)

 <input type="text" class="form-control input-lg" required>

combined with:

.float-labels input:focus + label, .float-labels input:valid + label{'styling'}

and http://codepen.io/anon/pen/QygwLR?editors=110.

edited May 23 '17 at 12:07

Community

1
1

answered Jan 10 '16 at 23:34

Arvid Mildner

21
1
3

Read the duplicate - Detect if an input has text in it using CSS?. Mine is nothing like it. I see you are new here. It's ok – LOTUSMS Jan 10 '16 at 23:35
Yep I am. Just thought I'd notify you, since this can be solved this way. If this is not sufficient then I suppose you just add a class to the label with javacript when you detect a keystroke in the input field. – Arvid Mildner Jan 10 '16 at 23:46
That's not how this site works. The advice you just gave is good but is not an answer.. It's an opinion. To get cred you need as an answer you need to provide the code, otherwise you can add it as a comment under my question. You'll get the hang of it eventually. They'll may close a few of your answers in the process. By the way, the CSS methid works in the codepen, but not in my site. Trying to figure out why – LOTUSMS Jan 10 '16 at 23:50
Seems a valid answer to me ... If it works in the codepen , it should be a valid answer, – vals Jan 11 '16 at 12:31

score 0 · Answer 2 · answered Aug 27 '22 at 21:18

This is how you can make it possible. don't forget to set placeholder=" " and required attr to your inputs.

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-gp {
    margin-top: 150px;
    position: relative;
    
}
.input-gp input {
    position: relative;
    
}
.input-gp label{
    position: absolute;
    left: 5px;
    bottom: 5px;
    transition: all .4s ease;
}
.input-gp input:placeholder-shown + label{
    left: 10px;
    bottom: 5px;
}
.input-gp input:focus + label,
.input-gp input + label{
    bottom: 30px;
    left: 10px;
}

<body>
 <div class="input-gp ">
<input  type="email" name="" id="email" placeholder=" "       required>
   <label class=" position-absolute" for="email"> Email</label>
  </div>
  
 </body>

Stop floating labels from resetting back to original position

2 Answers2

Linked