Forums

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

elneco

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

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.

Hompimpa

Did you mean: <input class="cf-se-input" autofocus> ??

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

jamy_za

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

jamy_za

Ok, then try something like:

$('.cf-se-input[autofocus]').trigger('focus').focus(function(){
	$(this).parent().addClass('focussed');
}).blur(function(){
	$(this).parent().removeClass('focussed');
});

treehouse : what would you like to learn today?

Forums

Input Jquery Focus On Page Load Then Do the following

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