Add class to element based on input value length/state with JavaScript

Question

I'm trying to create the 'floating labels' effect for my fields. However, I'm having difficulties because the HTML code is structured in such a way that prevents it from being achieved using only CSS as there is no way to use CSS combinators (>,+,~) and I do not have the ability to change the HTML code.

My code:

label {display: block; position: absolute; margin: 15px 0 0 12px; color: #606060; font-family: "Arial";}

input {display: block; padding: 15px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>

But I believe it would be possible if I was able to give the container a CSS class based on the field's input/state. I would like to give the container the display-floating-label class if the value of the input is greater than 0 ( > 0 ). And maybe when the input is focused as well. Is that possible with JavaScript?

I've tried:

$(document).ready(function() {
  var formFields = $('.container');
  
  formFields.each(function() {
    var field = $(this);
    var input = field.find('input');
    var label = field.find('label');
    
    function checkInput() {
      var valueLength = input.val().length;
      
      if (valueLength > 0 ) {
        label.addClass('display-floating-label')
      } else {
            label.removeClass('display-floating-label')
      }
    }
    
    input.change(function() {
      checkInput()
    })
  });
});

But it didn't work. I'm not very familiar with JavaScript so I would really appreciate if someone could help me out.

Here's what I'm trying to achieve:

*I can not change the structure of the HTML code, I can only work with what I have.

What's stopping you from using JavaScript to rearrange the DOM, which may allow a CSS-only solution to your problem? — David Thomas, Apr 19 '21 at 17:04
@David, I had no idea it's possible to rearrange the DOM using JavaScript as I'm not very familiar with it. Could you please create an answer of how you would achieve this? — JOKKER, Apr 19 '21 at 17:07
Duplicate: https://stackoverflow.com/questions/38301774/how-to-do-floating-of-labels-in-css — prettyInPink, Apr 19 '21 at 17:09

Bhautik · Accepted Answer · 2021-04-20T17:41:28.420

1

Try the below snippet.

$(document).ready(function() {
  
    $('.input').each(function(){
        if( $(this).val() !='' ){
            $(this).closest('.container').addClass('display-floating-label');
        }
    });
  
    $('.input').on('input', function() {
    
        var valueLength = $(this).val().length;
      
        if (valueLength > 0 ) {
            $(this).closest('.container').addClass('display-floating-label');
        } else {
            $(this).closest('.container').removeClass('display-floating-label');
        }

    });
  
});

label {position: absolute;margin: 15px 0 0 12px;}
.display-floating-label label {position: absolute; margin: 10px 0 0 12px; color: #606060; font-family: "Arial";font-size:10px;}
input {display: block; padding: 18px 12px 12px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input" id="input" placeholder="">
   </span>
</p>
<p class="container">
   <label for="input">
      Label&nbsp;
   </label>
   <span class="input-wrapper">
      <input type="input-text" class="input" name="input2" id="input2" placeholder="" value="Prefill">
   </span>
</p>

edited Apr 20 '21 at 17:41

answered Apr 19 '21 at 16:40

Bhautik

11,125
3
16
38

Thank you for your answer @Bhautik, this add the class to the label. But I also need to be able to style the `input` for the floating label. Is it possible to give the class to the container(`p`)? – JOKKER Apr 19 '21 at 16:48
The style I'm going for pushes the label to the top of the field and the input to the bottom which required to edit the padding of the input once the label is floating. – JOKKER Apr 19 '21 at 16:52
what you asked originally I answered. please ask a different question about this. – Bhautik Apr 19 '21 at 16:54
My question states: _"I would like to give the `container` the `display-floating-label` class if the value of the `input` is greater than 0 ( > 0 )"_. Your answer gives the class to the label, not the container. Nevertheless, thank you for your answer. – JOKKER Apr 19 '21 at 16:58
I included a GIF of what I'm trying to achieve in my original question. – JOKKER Apr 19 '21 at 17:00
Is it not possible to give the class to the container? If not, is it then possible to give the class to the label when the input is focused as well so the label floats as soon as you click on it? It looks weird with the caret at the bottom when the label is at the middle. – JOKKER Apr 19 '21 at 17:09
Yes, it's possible. I added. did you not checked my updated answer? – Bhautik Apr 19 '21 at 17:12
Oh, my bad, I didn't notice. Thank you! – JOKKER Apr 19 '21 at 18:17
For some reason I'm having trouble implementing the code on my website. Could you please just confirm if I understand the code correctly? On the 3rd line, the 1st `'.input'` is the class and the 2nd `'input'` is the tag of the element, correct? – JOKKER Apr 19 '21 at 18:47
On the 3rd line, the 1st `input` is for label and the 2nd `input` is a tag with class `.input` – Bhautik Apr 20 '21 at 04:11
Hey @Bhautik, sorry to bother you again but I'm experiencing an issue with the JS. The issue is that the `display-floating-label` class gets added only if the input value changes. So if a field gets pre-filled or auto-completed after the page loads up, the class is not added immediately. You have interact with the input value for the class to be added. Is there a way to fix this? [Here's a screen recording to better understand what I mean](https://files.fm/f/556nxyycn). – JOKKER Apr 20 '21 at 17:34
Doesn't work. Pre-filled fields are stuck with the `.display-floating-label` class which does not get removed when I delete the whole input value. Empty fields no longer get the `.display-floating-label` class if I type something in. – JOKKER Apr 20 '21 at 17:58
working fine in the above snippet you can see. – Bhautik Apr 20 '21 at 18:02
My bad, I missed one class, it works fine. My other concern is that the JS starts working only after the page finishes loading up. So at the very beginning, for a second, the label appears scrambled. Could this be because I have added the JS to the footer of my website so it loads last? – JOKKER Apr 20 '21 at 18:19
are you using PHP to get and fill up values? – Bhautik Apr 20 '21 at 18:21
I honestly don't know but probably. It's a WordPress website so I'm not very advanced in the technical aspect of web development.. – JOKKER Apr 20 '21 at 18:30
Please put the PHP code in your question that prefills values. – Bhautik Apr 20 '21 at 18:41
I was not able to find it as I have no idea where and what to look for so I contacted the plugin's support, maybe they'll help. In the mean time, I found another issue. When filling up address fields, the browser suggests using an address that is saved in the browser. When you hover over the suggested address, you can see a preview of the fields filled with the saved address values. [Here's a screenshot of how it looks like](https://ibb.co/LSdGCQQ). Is it possible to give the `display-floating-label` class to the container when the field is displaying a preview of the value? – JOKKER Apr 21 '21 at 10:17

Add class to element based on input value length/state with JavaScript

1 Answers1