Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2014-01-31
13
Medium Priority
?
529 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
13 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39824806
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
ID: 39824807
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
ID: 39824810
Yes, on set focus on next input
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 58

Expert Comment

by:Gary
ID: 39824815
Are you using jQuery or just plain javascript?
0
 

Author Comment

by:KeithMcElroy
ID: 39824822
jquery, tried this (no success) but seems close

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

Author Comment

by:KeithMcElroy
ID: 39824823
corrected the class . still no work

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

Accepted Solution

by:
Gary earned 2000 total points
ID: 39824889
$("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
ID: 39825349
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
ID: 39825360
Post your code, it may need tweaking a tiny bit
0
 

Author Comment

by:KeithMcElroy
ID: 39825370
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
ID: 39825381
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
ID: 39825385
Awesome, thank you!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39825387
So you want to skip disabled elements?
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

670 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