Self-proclaimed greatness is a hard thing to prove.
Input focus with jQuery
Form input focus always seems a pain to me, I don’t like all of the generated inline javascript that struts or other frameworks add to accomplish this and it always seems to be one issue or another. So here’s a simple solution that applies focus to the last input element in the document that has a class of focus. Short and sweet, nothing fancy, requires the jQuery library of course.
The javascript, preferrably in an external javascript file
$("input.focus:last").focus();
The html
| Print article | This entry was posted by webguy on June 16, 2008 at 7:58 am, and is filed under DOM. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |
No trackbacks yet.
Enable JavaScript specific CSS with one line of jQuery
about 1 year ago - 23 comments
jQuery is by far my favorite JavaScript framework in terms of simplicity and just pure DOM power. I picked up a little trick at a conference quite a few months back and improved upon it and thought it could benefit anyone that believes in the mantra of progressive enhancement. Here’s the line of code that
Setting your tabindex on your html forms automatically with jQuery
about 1 year ago - 12 comments
The tabindex is absolutely necessary for controlling the tab order through a really long form, from a usability and accessibility standpoint. This is probably not the preferred way to do this, you should be setting the tabindex attribute on all of your input elements in your html. Now if you work with lazy developers, that
Prevent double submit with jQuery
about 1 year ago - 13 comments
Another great “little” solution with jQuery. Needed a simple way to protect all the forms on our site from being double submitted. There was an attempted solution in place on our app, that added an onsubmit to every form with a function above it called ignoreDoubleSubmit that tried to trap the event of the button
Default html button submit on enter with JQuery
about 2 years ago - 14 comments
I basically needed the update button to be the default action on clicking enter in the form, but there were multiple submit buttons in my form and they weren’t in the order I needed due to UI design. This was a quick and dirty solution to select an html submit button and make it the
Suckerfish DHTML dropdown menu with JQuery
about 2 years ago - 13 comments
DHTML dropdown menu’s have been greatly improved in terms of accessibility, standards compliance, and weight using the Suckerfish technique of building pure CSS-based menus and then attaching a small javascript that allows Internet Explorer 6 to mimic the CSS hover method. Once the die-hards hanging onto IE6 let go, we won’t have to worry much
about 2 years ago
You could also use :
$(“:input”).each(function () {
this.focus(); });
This way you don’t need to set the class=”focus” .It uses the selectors api.
about 2 years ago
I’m not sure this accomplishes the same thing, how do you control which input box gains focus then? The idea behind setting a class of focus is, say you have a search field that’s always present in the header of the page that you want to have focus as long as nothing else has focus, but on certain pages like login, for example, you want the username field to have focus instead, in my example both would have a class of focus, but the last field with the focus class specified in the document would actually end up with the focus.
about 2 years ago
Im missing something here… only one element of a page can have the focus, so why are you using “each”?
Its easier something like this:
$(“#fieldId”).focus(); or $(“input.focus”).focus();
or maybe $(“:input:first”).focus();
Bye
about 2 years ago
You’re right there’s probably a better and more efficient way to do this rather than use each, it might even be a little lazy. The goal is to have the last field with focus specified receive focus. The each method does a couple of things for me: if there’s more than one field specified with focus, the method will loop through those elements and the last one will end up with focus; if there are no items with focus there will be no jQuery objects returned and I won’t end up with a javascript error because I asked for focus on something that didn’t exist. Note your syntax above is not correct as focus in this context is a DOM method, not a jQuery method.
about 2 years ago
I dont think so, $(…).focus() is another jQuery method, to call the DOM method you need this $(…).get(0).focus().
jQuery is smart enought to dont execute focus() if there is no matched elements, just like each(). Try it for yourself
“Triggers the focus event of each matched element”: http://docs.jquery.com/Events/focus
Thanks for reply
about 2 years ago
I stand corrected, I misinterpreted the doc, I’ll update the post. Thanks for the feedback.
about 2 years ago
using a class selector without a tagname is far far far slower. always use “input.focus” instead of “.focus” when possible.
about 2 years ago
Paul, thanks for the advice, I’ve updated the post again to reflect it. I’ve truly been schooled on this one.
about 1 year ago
Thanks, I needed this for one of the sites I’m working on…
about 8 months ago
There is no need to complicate things. You can do everything using selectors, following code will set focus on first visible input.
$("input:text:visible:first").focus();about 8 months ago
Actually there was a need to complicate it a little in order to have a level of control, with shared templates there’s a need for a hierarchy of focus, this is why I chose to give a class to the objects in the page that typically have focus and then apply focus to the last element with that class based on the document order.
about 7 months ago
Hi there. Guys, I have been using JQuery for the last 8 months and the more I use it the more I like it. The question I have is: Is there a bible for JQuery written down or Online which I can consult and study to become a Guru in the subject? can you direct it to me?
I really appreciate it.
about 7 months ago
jQuery has great documentation for their API at http://docs.jquery.com/Main_Page, of course there are tutorials and examples throughout the Internet. When I first started out I skimmed a book called Learning jQuery by Jonathan Chaffer and Karl Swedberg, once you get a lot of the concepts down you’ll find that you’ll use the API documentation 90% of the time.
about 7 months ago
Thank you a lot. I will go ahead and purchase the book I mean, I have been going off and on to the API documentation and I have managed to add few jquery features to some sites I have worked on however I feel like I gotta work more on the fundamentals and concepts. Every time I have to use JQuery I end up fishing some pieces of code written by somebody else (which is not bad per sea) but it doesn’t come easy.
Cheers.
about 6 months ago
Hey guys.
I’m trying to make a site that uses PHP in the backend, jQuery to make the UI fancy, and Ajax calls to populate some of the elements. I have a page that shows a bunch of data from a table, using Ajax to get back just a few records at a time. I have a filtering system where I use INPUT fields to let the user filter the data. My problem is that the INPUT field itself is being created by the same Ajax call. What happens is that the INPUT field loses focus no matter what I do.
So far, if I combine .select() and .focus(), I can get the focus to the *beginning* of the text field, which doesn’t really work for a “type into” application. If I want to filter by “Jones”, I end up with “senoJ”.
My code is:
var savedfiltfield;
…
$(‘tr.filter input’).live(‘keyup’, function() {
savedfiltfield = $(this).attr(‘id’);
setfilt($(this));
});
…
// in setfilt() function:
$.get(‘listing_ajax.php’, {type : type, page : newpage, sort : sort, filt : filt, rowcnt : rowcnt},
function(data) {
$(‘table#maindata’).html(data);
$(‘input.#’+savedfiltfield).focus();
}
);
If I add .select() after the .focus(), it will select the text. If I put .select() before the .focus(), it will put the cursor at the beginning of the field.
HELP!?!?
Thanks.
about 4 months ago
works nice! thanks =)
about 1 month ago
I found this method to be very useful for me. I figured this would probably help me remember to set the tab index as well.
$(document).ready(function(){
$(“input[tabindex=0]“).focus();
});