Implementation of Enter key to switch focus based on Jquery_jquery

Next, we use Jquery to implement the Enter key to switch focus. This code has been tested in common browsers IE7, IE8, Firefox 3, Chrome 2 and Safari 4.
The development tool used is Microsoft VS2010 Jquery framework.
The implementation steps are as follows
1. First reference the Jquery class library

2. Javascript code

Copy code The code is as follows:

Analysis:
$('input:text:first').focus( ; .bind('keydown', function (e) {}
Bind the 'keydown' event to the text box collection
var key = e.which;
Get the currently pressed key value, such as Enter Key value = 13
e.preventDefault();
can prevent its default behavior from happening and other things happen. Here we prevent PostBack from happening, but switch the focus. Another similar method is stopPropagation. It plays the role of preventing js events from bubbling.
The event proxy uses two features that are often ignored in JavaSciprt events: event bubbling and target elements when an event on an element is triggered, such as a mouse. When a button is clicked, the same event will be triggered in all ancestor elements of that element. This process is called event bubbling; the event bubbles up from the original element to the top of the DOM tree. For any event, the target element is the original element, which in our case is the button. Target Element It appears as an attribute in our event object. Using an event proxy, we can add an event handler to an element, wait for the event to bubble up from its child elements, and easily determine which element the event started from.
var nxtIdx = $inp.index(this) 1;
The next element index in the retrieved element set inp
$(":input:text:eq(" nxtIdx ")").focus ();
Position focus to the next element of the collection

3. HTML code



Copy code

The code is as follows:

Analysis: stored on the page Four text boxes
3. Run the program

If there is a TextArea element on the page, how can we use Enter to switch focus? There are ways. The following fully utilizes some features of Jquery.

4. HTML code



Copy code

The code is as follows:

Analysis:
All TextBoxes in the page refer to Class="cls" to facilitate later Jquery query of page elements.

5. Javascript code



Copy code

The code is as follows:


Analysis:
var $inp = $('.cls');
The style taken is to assign all elements of cls to the variable inp
6. Operation effect

Author: Smart Life