Solved

Use enter to jump between webform elements

Posted on 2014-03-04
7
305 Views
Last Modified: 2014-03-18
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
Comment
Question by:peternordberg
  • 4
  • 2
7 Comments
 
LVL 22

Expert Comment

by:plusone3055
Comment Utility
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
 

Author Comment

by:peternordberg
Comment Utility
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
 

Author Comment

by:peternordberg
Comment Utility
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
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)

762 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

12 Experts available now in Live!

Get 1:1 Help Now