Grow your CSS skills. Land your dream job.

Input Jquery Focus On Page Load Then Do the following

  • # May 22, 2012 at 3:13 pm

    Okay I have an input with the class of .cf-se-input. How can I get the input field to focus on page load then when the input field is focused to add a class to it.

    here is the following code I have for now


    $(function() {
    $(".cf-se-input").focus();
    $(".cf-se-input").focus(function(){
    $('#searchput').addClass('cfse_b');
    });
    });

    As this is what is want to happen I have already styled the input using css and when the input has a class of cfse_b the input has a blue border around it however when the input doesn’t have a class of cfse_b the input doesn’t have a blue border. That is why when the dom is ready on document ready I want the input field to be focused and when it is focused I want to add a class of cfse_b.

    Important

    If you are going to help me I please request that you do not use an var In the jquery code. As I don’t like the use of var and it makes it confusing for me to understand I’d like for someone to help me. Please

    # May 22, 2012 at 10:24 pm

    Is style the sole purpose of adding the class? why dont you just apply the rules of .cfse_b to .cf-se-input:hover ?

    # May 22, 2012 at 10:42 pm

    Important If you are going to help me I please request that you do not use an var In the jquery code. As I don’t like the use of var and it makes it confusing for me to understand I’d like for someone to help me. Please

    Then why do you not simply learn how variables work? They are a powerful tool, and you aren’t doing yourself any favors by ignoring them.

    # May 22, 2012 at 11:42 pm

    Did you mean: ??

    $('.cf-se-input[autofocus]').parents('#searchput').addClass('cfse_b');
    # May 23, 2012 at 2:45 pm

    no as <input class=”cf-se-input” autofocus>
    the problem here is the inside the input html text autofocus only works in html5 supported browsers. Im trying to use jquery to accomplish autofocus on page load on all browsers. Then once the input field is focused it should add a class to it .cfse_a

    # May 24, 2012 at 1:10 pm
    $('.cf-se-input[autofocus]').trigger('focus').focus(function(){
    $('#searchput').addClass('cfse_b');
    });

    @elneco is right though. Why not use CSS to do this?

    .cf-se-input:focus { border: 1px solid blue; }
    # May 24, 2012 at 2:44 pm

    the reason im not using css is because its not the .cf-se-input field that i want to have a blue border its the div element wrapping the input field that i want with the blue border therefore only .cf-se-input the field the div wrapping it which is #searchput should be added the class cfse_b

    # May 24, 2012 at 3:39 pm

    Ok, then try something like:

    $('.cf-se-input[autofocus]').trigger('focus').focus(function(){
    $(this).parent().addClass('focussed');
    }).blur(function(){
    $(this).parent().removeClass('focussed');
    });
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".