Use enter to jump between webform elements

Peter Nordberg
Peter Nordberg used Ask the Experts™
on
Hi,

I'm working in an asp.net environment. I wonder if it's possible, with javascript or jquery or the like, to jump between different webform elements on a webpage by using the Enter key?

For example:
Say that I have a row with a asp dropdown, two asp textboxes and a asp button. Can I then move from one to the other with the Enter key, like in an windows application?

Thanks for help!

Peter
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
please take a look at this article
it contains code for what you a re looking for IE moving through elements with the enter Key using Jquery in ASP.NET

http://www.dotnetcurry.com/showarticle.aspx?ID=538
Peter NordbergIT Manager

Author

Commented:
Hi,

I tried the script and it works fine with textboxes, but when I added a asp button I couldn't get it to work.

Peter
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
That solution has two problems

1. It uses .bind - which is depreacted as of 1.7
2. it is not circular.

Here is an example of a circular script using .on
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input:text').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input:text');
      var indx = ((inp.index(this) + 1) % inp.length);
      $('input:text:eq(' + indx + ')').focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    
  </div>
</body>
</html>

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Here is an updated sample with different types of inputs
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input');
      var indx = ((inp.index(this) + 1) % inp.length);
      $('input:eq(' + indx + ')').focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" />
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
  </div>
</body>
</html>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This sample demonstrates the concept with a <textarea> in the middle of some <input>'s. Textarea is tricky because you don't want to disable the enter in the text box.  To prevent this we only pick up the enter on the input but we move the focus based on input and textarea.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (e.which==13) {
      e.preventDefault();
      var inp = $('input,textarea');
      var indx = ((inp.index(this) + 1) % inp.length);
	  inp.eq(indx).focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" />
	<textarea name="bob"></textarea>
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
  </div>
</body>
</html>

Open in new window

Peter NordbergIT Manager

Author

Commented:
Hi and thanks for answers,

Is it also possible to tweak it so that if it is a button that is the next control when I click Enter, the click event fires on the button?

Peter
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Yes - you can put a condition in the if statement to check if it is a button like this. I have added an onclick to the <button> to show what happens when you press enter on the button.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('input').on('keydown', function(e) {
    if (!$(this).is(':button') && e.which==13) {
      e.preventDefault();
      var inp = $('input,textarea');
      var indx = ((inp.index(this) + 1) % inp.length);
	  inp.eq(indx).focus();
    }
  });
});

</script>
<style type="text/css">
</style>
</head>
<body>
  <div class="address">
  <form action="index.php">
    <input type="text" name="a"/>
    <input type="text" name="b"/>
    <input type="text" name="c"/>
    <input type="text" name="d"/>
    <input type="button" name="e" onclick="alert('clicked');" />
	<textarea name="bob"></textarea>
	<input type="checkbox" name="f" value="1" />
	<input type="radio" name="g" value="No" /> No
	<input type="radio" name="g" value="Yes" /> Yes
	<textarea name="bob2"></textarea>
  </form>
  </div>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial