.change() event doesn't work if keydown is prevented
Allrighty, this problem is making me lose hair
I'm trying to control the tabs on my page so if you get to a certain input box and press tab I want you to go to the first input box, not the following one.
The problem is that the same input box has a .change() event. This won't fire if I use event.preventDefault() on the keydown event.
Let me follow up with the code to make it more clear:
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" /></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('#myInputBox').keydown(function(e){
- if(e.which == 9){
- e.preventDefault();
- $('#first').focus();
- }
- });
-
- $('#myInputBox').change(function(){
- alert("Changed!");
- });
- });
- </script>
- </head>
-
- <body>
- <table>
- <tr>
- <th>Description</th>
- <td colspan="3"><input type="text" class="always" id="first" /></td>
- </tr>
- <td>Input box</td>
- <td><input type="text" id="myInputBox" class="left" /></td>
- <tr>
- <th>Submit</th>
- <td><input type="submit" class="always" id="last" /></td>
- </tr>
- </table>
- </body>
- </html>
RIght, so when you tab down to the #myInputBox and add something (which will trigger the change event) and then press tab the event is prevented and focus set to the first input box.
However, the change event is prevented as well.
I can only assume that this is because there is no return to register and that the onChange event depends on the return from the keydown event.
Is there a way to get passed this? I mean, to manually trigger the change event is not an option since that would trigger every time, not just when something has actually changed.