• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 352
  • Last Modified:

Use enter to jump between webform elements

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
0
peternordberg
Asked:
peternordberg
  • 4
  • 2
4 Solutions
 
plusone3055Commented:
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
0
 
peternordbergAuthor 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
0
 
Julian HansenCommented:
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

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
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

0
 
Julian HansenCommented:
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

0
 
peternordbergAuthor 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
0
 
Julian HansenCommented:
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

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now