Solved

javascript:  add enter key = tab after initial load of form

Posted on 2014-01-31
13
495 Views
Last Modified: 2014-01-31
Using jquery and/or javascript, how can I make the enter key same as tab, but have that happen after a button is clicked on the form, in other words not onload of the form?

The following which I found via good search works if embedded in the body tag, but that does not work for me since I need the feature to occur post-load as mentioned above.

"if(event.keyCode==13) {event.keyCode=9; return event.keyCode })"
0
Comment
Question by:KeithMcElroy
  • 8
  • 5
13 Comments
 
LVL 58

Expert Comment

by:Gary
Comment Utility
You can't change an enter to become a tab (not like that anyway)
Are you wanting to capture the enter key so you can set focus on the next input?
0
 

Author Comment

by:KeithMcElroy
Comment Utility
I tried this at the event where I want the 'enter to tab' feature to work

                  var body = $('body')

                  body.addEventListener("onkeydown", "if(event.keyCode==13) {event.keyCode=9; return event.keyCode }", false)


It does not work, however, maybe it is close?
0
 

Author Comment

by:KeithMcElroy
Comment Utility
Yes, on set focus on next input
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Are you using jQuery or just plain javascript?
0
 

Author Comment

by:KeithMcElroy
Comment Utility
jquery, tried this (no success) but seems close

                  $("input").live('keyup',function () {
                  $(this).next(".input").focus();
                        });
0
 

Author Comment

by:KeithMcElroy
Comment Utility
corrected the class . still no work

  $("input").live('keyup',function () {
                  $(this).next("input").focus();
                        });
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
$("input").keypress(function(e) {
	if(e.which == 13) {
		var index = $('input[type=text]').index(this) + 1;
		var total_els = $('body').find('input[type=text]').length;
		if(total_els == index){index=0}
		$('input[type=text]:eq('+index+')').focus();
	}
});

Open in new window

0
 

Author Comment

by:KeithMcElroy
Comment Utility
Thank you for the code, it is not working yet, but may be something about my form. I understand the steps so I bet I shall be able to make it work.
Will stand by for any further comments, otherwise shall reward points.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Post your code, it may need tweaking a tiny bit
0
 

Author Comment

by:KeithMcElroy
Comment Utility
I think I see where I need help, this is an internal web form, dynamic and I've never been able to figure out how to get a working sample outside the internal network,
However, the code you did, as is, is working except in rows where I have disabled text boxes and check boxes.  So, I think, if I can remove disabled inputs and check boxes from the forward cursor, it is good.  I will pursue, but if you know off top of your head, how to do that would be be great.  This is a big help.  Thank you!  Again will reward points, but want to allow for any further from you.
0
 

Author Comment

by:KeithMcElroy
Comment Utility
the following did the trick:
                  $("input").keypress(function(e) {
                  if(e.which == 13) {
                  
                        var index = $('input[type=text]:enabled').index(this) + 1;
                        var total_els = $('body').find('input[type=text]:enabled').length;
                              if(total_els == index){index=0}
                                    $('input[type=text]:enabled:eq('+index+')').focus();
                        }
                  });
0
 

Author Closing Comment

by:KeithMcElroy
Comment Utility
Awesome, thank you!
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
So you want to skip disabled elements?
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now