Question

Hello I want to retrive the class of the focused Input. For example I have this code:

<div class="form-all">
<ul class="form-section">
  <li class="form-line" id="id_8">
    <label class="form-label-left" id="label_8" for="input_8">  </label>
    <div id="cid_8" class="form-input">
      <input type="text" class="form-textbox" id="input_8" name="q8_8" size="50" placeholder="Full Name">
    </div>
  </li>
  <li class="form-line" id="id_7">
    <label class="form-label-left" id="label_7" for="input_7">  </label>
    <div id="cid_7" class="form-input">
      <input type="text" class="form-textbox" id="input_7" name="q7_7" size="50" placeholder="Company Name">
    </div>
    </li>
    <li class="form-line" id="id_4">
    <label class="form-label-left" id="label_4" for="input_4">  </label>
    <div id="cid_4" class="form-input">
      <input type="email" class="form-textbox validate[Email]" id="input_4" name="q4_4" size="50" placeholder="Email Address">          
    </div>
  </li>
</ul>
 </div>​​​​​​​​​​​​​​​​​​​​​​​

This is a form with 23 inputs. I want when I focus an input to add a class to the <li> in witch is the input. I know how to add the class to the li, the problem is how to find the input focused…. $("#input_"+ var).parent().addClass("field-active");

What is the var ?

Answer 1

You can try :focus selector:

$('input:focus').attr('id');

to access class:

$('input:focus').attr('class');

you can change the selector if necessary.

Check this

$('input').on('focus', function() {
    $('.field-active').removeClass('field-active')
    $(this).parent().addClass("field-active");
}).on('blur',function() {
    $('.field-active').removeClass('field-active')
});​

Demo