Switch the cursor through the upper, lower, left, and right buttons and the Enter key

When creating a project, the customer puts forward this requirement. When entering data in the text box in the list, you must be able to switch the cursor by pressing the up or down key, and press the Enter key to move the cursor to the next text box. This saves you the trouble of using the mouse, making it easier to operate.

No nonsense. Use the code.

Page code

<Asp: gridview id = "gdv" runat = "server" allowpaging = "true" pagesize = "50" autogeneratecolumns = "false" enablemodelvalidation = "true" width = "100%" pagerstyle-horizontalalign = "center"> <pagersettings visible = "false"/> <pagerstyle horizontalalign = "center"/> <rowstyle horizontalalign = "center"/> <columns> <asp: templatefield headertext = "no."> <itemtemplate> <asp: Label id = "LBL" runat = "server" text = "<% # container. dataitemindex + 1%> "> </ASP: Label> </itemtemplate> </ASP: templatefield> <asp: templatefield headertext =" name "> <itemtemplate> <asp: textbox id = "barcode" runat = "server" width = "200px" maxlength = "10"> </ASP: textbox> </itemtemplate> </ASP: templatefield> <asp: templatefield headertext = "quantity"> <itemtemplate> <asp: textbox id = "susfillcount" runat = "server" width = "200px" onkeypress = "If (event. keycode <48 | event. keycode> 57) event. returnvalue = false; "maxlength =" 5 "> </ASP: textbox> </itemtemplate> </ASP: templatefield> </columns> </ASP: gridview>

Jquery code

<SCRIPT type = "text/JavaScript" src = "jquery-1.4.4.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript"> $ (function () {$ ("input "). eq (0 ). focus (); $ ("input [type = 'text']"). keydown (function () {var key = event. keycode; Switch (key) {Case 37: // left {if ($ (this ). parent (). prev (). length> = 1) {$ (this ). parent (). prev (). find ("input "). focus ();} break;} case 38: // up {if ($ (this ). parent (). parent (). prev (). length> = 1) {$ (this ). parent (). parent (). prev (). children (). children (). eq ($ (this ). parent (). prevall (). length ). focus () ;}break;} case 39: // right {if ($ (this ). parent (). next (). length> = 1) {$ (this ). parent (). next (). find ("input "). focus ();} break;} case 40: // down {if ($ (this ). parent (). parent (). next (). length> = 1) {$ (this ). parent (). parent (). next (). children (). children (). eq ($ (this ). parent (). prevall (). length ). focus () ;}break;} Case 13: // press ENTER {event. keycode = 9; break;} default: {break ;}}) ;}); </SCRIPT>

Done!