Add a class to the label when its input is full.

<input type="text" id="test1"> <label for="test1">поле 1</label>

How can this be implemented on jquery?

    3 answers 3

     $('#test1').change(function(){ tmpval = $(this).val(); if(tmpval == '') { $('#lbl1').removeClass('class1'); } else { $('#lbl1').addClass('class1'); } }); 
     .class1 { background: green; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="test1"> <label id="lbl1" for="test1">поле 1</label>

      In my decision, the event also works when inserting text and, without having to go out of focus, to make the changes work.

       $('#test1').on('change paste keyup', function () { var $this = $(this); var input_value = $this.val(); var input_id = $this.attr('id'); if (input_value.length === 0) { $('label[for=' + input_id + ']').removeClass('foo'); } else { $('label[for=' + input_id + ']').addClass('foo'); } }); 
       .foo { background-color: green; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" id="test1"> <label for="test1">поле 1</label>

        On pure JS:

         document.getElementById('test1').onkeyup = function() { if(this.value == '') { document.getElementById('lbl1').classList.remove('class1'); }else{ document.getElementById('lbl1').classList.add('class1'); } }; 
         .class1 { background: green; } 
         <input type="text" id="test1"> <label id="lbl1" for="test1">поле 1</label>