jquery implements enter enter to toggle focus

The system by default, using the TAB key to switch the focus of the page element, have not thought of enter enter can also achieve this function, and has a good user experience. Next we use Jquery to implement the ENTER switch focus, which is tested in popular browsers IE7, IE8, Firefox 3, Chrome 2 and Safari 4.

The development tool used is the Microsoft Vs2010+jquery Framework

The implementation steps are as follows

1. First quote jquery class library

<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>

2. JavaScript code

<script type= "Text/javascript" >
$ (function () {
$ (' Input:text:first '). focus ();
var $inp = $ (' Input:text ');
$inp. Bind (' KeyDown ', function (e) {
var key = E.which;
if (key = = 13) {
E.preventdefault ();
var nxtidx = $inp. Index (this) + 1;
$ (": Input:text:eq (" + Nxtidx + ")"). focus ();
}
});
});
</script>

Analysis :

$ (' Input:text:first '). focus ();

When the page is initialized, focus is positioned in the first text box

var $inp = $ (' Input:text ');

The collection of elements of the type= text box taken

$inp. Bind (' KeyDown ', function (e) {}

Bind the ' KeyDown ' event to a text box collection

var key = E.which;

The key value of the currently pressed key, such as Enter =13

E.preventdefault ();

It is possible to prevent the occurrence of its default behavior and other things happen here, where we organize postback to occur, instead of switching focus. Another similar approach is stoppropagation, which plays a role in preventing the bubbling of JS events.

The event agent uses two features that are often ignored in the Javasciprt event: event bubbling and the target element. When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is known as event bubbling, which bubbles to the top of the DOM tree from the beginning of the original element. For any event, the target element is the original element, which is the button in our example. The target element it appears as an attribute in our event object. With the event agent, 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 starts with.

var nxtidx = $inp. Index (this) + 1;

Collection of elements the next element in the INP index

$ (": Input:text:eq (" + Nxtidx + ")"). focus ();

Position focus to the next element of the collection

3., HTML code

<div>
<asp:textbox id= "txt1" runat= "Server"/><br/>
<asp:textbox id= "txt2" runat= "Server"/><br/>
<asp:textbox id= "TXT3" runat= "Server"/><br/>
<asp:textbox id= "TXT4" runat= "Server"/><br/>
</div>

Analysis: Four text boxes are stored on a page

3. Running the program

If there is a TEXTAREA element in that page, how do we use ENTER to toggle the focus, by the way, the following is the best use of jquery features

4. HTML code

<div>
<asp:textbox id= "TB1" runat= "Server" class= "CLS"/><br/>
<asp:textbox id= "TB2" runat= "Server" class= "CLS"/><br/>
<asp:textbox id= "tb3" textmode= "MultiLine" runat= "Server" class= "CLS"/><br/>
<asp:textbox id= "TB4" runat= "Server" class= "CLS"/><br/>
</div>

Analysis :

The textbox in the page refers to the class= "CLS", which facilitates later jquery queries on page elements.

5. JavaScript code

<script type= "Text/javascript" >
$ (function () {
$ (' Input:text:first '). focus ();
var $inp = $ ('. CLS ');
$inp. Bind (' KeyDown ', function (e) {
var key = E.which;
if (key = = 13) {
E.preventdefault ();
var nxtidx = $inp. Index (this) + 1;
$ (". Cls:eq (" + Nxtidx + ")"). focus ();
}
});
});
</script>

Analysis :

var $inp = $ ('. CLS ');

The given style is assigned to the variable INP for all the elements of the CLS

6. Operation Effect

Original: http://www.cnblogs.com/ywqu/archive/2010/09/13/1825355.html