- This topic is empty.
-
AuthorPosts
-
May 22, 2012 at 3:13 pm #38177uddinnyc94Member
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:42 pm #103301joshuanhibbertMemberImportant 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 #103306Taufik NurrohmanParticipantDid you mean:
??
$('.cf-se-input[autofocus]').parents('#searchput').addClass('cfse_b');
May 23, 2012 at 2:45 pm #103347uddinnyc94Memberno 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_aMay 24, 2012 at 1:10 pm #103419jamygoldenMember$('.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 #103430uddinnyc94Memberthe 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 #103434jamygoldenMemberOk, then try something like:
$('.cf-se-input[autofocus]').trigger('focus').focus(function(){
$(this).parent().addClass('focussed');
}).blur(function(){
$(this).parent().removeClass('focussed');
}); -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.