How can I improve this jQuery Gmail-like interface?

Question

EDIT 3: I've gotten this working by ignoring the advice given below and listening on the window, but only when an input, text field, or textarea is not focused. I'm not sure if this is the best way to be handling this issue, though.

http://jsfiddle.net/gXPES/5/

---

EDIT 2: I've tried addressing the keydown issue by applying focus and blur handlers to inputs. Then I only listen for events when var focus_on_input == true. But it seems that not all is well. This is preventing some behaviors, but causing other, more bizarre behavior. For example, when I tab out of the input field, pressing J and K will jump to the top or bottom of the list. If I click elsewhere and shift focus, this issue is fixed. Any thoughts?

---

EDIT: Thanks to answerer help, I've limited the selectors when listening for keydown so that I can still type characters elsewhere, but I'm running into a new issue. When I press J or K the arrow nav jumps to the top or bottom of the task list. And when I press C or # it will notify me that no tasks are selected. X functions as it should and does not select a task.

---

Hosting this code on JSFiddle since there's no possible way to comment on it in its entirety here. I've posted all my JS, CSS, and HTML used for the interface itself.

I'm designing a Gmail-inspired UI for task management using jQuery on the front-end (and PHP on the back-end, though it's largely irrelevant to this).

I'm still relatively new to jQuery development and so I realize I'm doing a number of things wrong. Until now, I simply haven't known what exactly I'm doing wrong nor how to fix it. I was hoping some more learned souls might help me (and others, hopefully) figure out how to refactor jQuery code for a larger-sized application.

To start, here are a number of things I would like to know how to do better:

1. Call this code only when the task interface is active.

2. Improve the listening for the keydown event. Currently I listen for J, K, X, Shift+3, and C. I will also be listening on E for task editing, but haven't yet implemented edits. The problem with the listeners is related to my first concern, which is that they are always on. This means that pressing J while in a <textarea>, for example, will not result in the default behavior.

3. Use less HTML in my code.

4. Make my code generally more DRY.

Any thoughts, no matter how critical, are more than welcome. Again, I realize I am not following best practices here, but that's because I'm dumb to them. I want to learn, and hope to use this opportunity to do so.

Cheers!

Answer 1

I like your idea! I made a few changes in your code to make it more streamline (updated demo):

1. I removed all the input focus binds... then added inside the keydown function a check that ignores the key if the event occurred in a text input or textbox.
2. Wrapped all the code inside a document ready - so you can add your code to the page head.
3. Changed keydown from $(this) to $(document) (ref).
4. Added cached jQuery objects to speed up the script (e.g. container = $('#task-list-container')).
5. Made a yellowTaskMessage function to add alerts.
6. Added yellow-task-message div to the HTML.
7. Added display:none to .yellow-task-message in the CSS.
8. Streamlined a few other things (e.g. unwrapped next_task as it is already a jQuery object).
9. Ran the script through JSLint to clean up any errors (not counting the global variables)

Answer 2

.keydown doesn't need to be assigned to $(window) it takes a selector such as $(':not(textarea)')