Input Jquery Focus On Page Load Then Do the following

[uddinnyc94]

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

[joshuanhibbert]

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.

[Taufik Nurrohman]

Did you mean: ??

$('.cf-se-input[autofocus]').parents('#searchput').addClass('cfse_b');

[uddinnyc94]

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

[jamygolden]

$('.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; }

[uddinnyc94]

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

[jamygolden]

Ok, then try something like:

$('.cf-se-input[autofocus]').trigger('focus').focus(function(){

$(this).parent().addClass('focussed');

}).blur(function(){

$(this).parent().removeClass('focussed');

});

[Author]

Posts