How to add classes input focused on checkout and product review forms?

Question

If an input is in focus or has a value, I want to add a class to all inputs parent .field div. For example on the product page review form or on the checkout page shipping form. If the input is in focus I would add an "active" class and if the input has a value I would add the class "hasavalue."

When I try to use jquery, nothing happens on the product page review form inputs or on the checkout page inputs.

Here's the jquery I am using:

requirejs(['jquery'],function($){

$(document).ready(function(){


    $('.field input').focus(function () {
        $(this).parent().parent().addClass('active');
    }).blur(function () {
        $(this).parent().parent().removeClass('active');
    });



    $('.field input').blur(function(){

        if ( $(this).val() ) {
              $(this).parent().parent().addClass('hasavalue');
        } else{
            $(this).parent().parent().removeClass('hasavalue');
        }

    });


});});

Do I need to use knockout? If so, how can I translate this simple jquery to work with all inputs in Magento?

Answer 1

try this:

function() { 
var spinner = $(this),
 input = spinner.find('input[type="your inpur type"]'); 
}