Using JS, you can use the Enter key and ctrl key to navigate in the text box.

Source: Internet
Author: User

Users of the current development project are used to entering data with a keypad, such as entering 1, replacing it with "++", inputting 2, and replacing it with "AAA,

And use enter to wrap the line. In order to meet these user needs, I specially wrote two sections of JSCode, The first one is relatively simple, so it will not be pasted. The second function is pasted as follows:

 

 

Press enter to wrap up, press Ctrl + press enter to wrap up
// /
// /Usage
// /Window. onload = loadenternav;
// /PS:
// /1. You can set whether to jump out of the input enter navigation in function keydown.
// /2. In function loadenternav, you can set the style and event to be executed after the text box obtains the focus.

/* ========== Some variables ================ */
VaR Isctrl =   False ; // Mark whether to press Ctrl
VaR Currinput; // Current input
VaR Arrinput =   New Array (); // Page text box Array

// End

FunctionKeydown (e ){
VaREVT=E|Window. event;

Switch(EVT. keycode ){
Case 17://CTRL
Isctrl= True;
Break;

Case   13 : // Enter
If (Isctrl ){
// Go to the previous line
Gotolastinput ( True );
}
Else {
// Jump to the next line

// EVT. keycode = 9 can jump out of the text input navigation and enter the original navigation page

Gotolastinput ( False ); // Only in text input navigation
}
Break ;
Default : Break ;
}

}

FunctionKeyup (e ){
VaREVT=E|Window. event;

If(EVT. keycode= 17){
Isctrl= False;
}

}

FunctionKeypress (e ){
VaREVT=E|Window. event;

If(EVT. keycode= 17){
Isctrl= True;
}

}

/*====== Jump up input ===== start ======*/

FunctionSetobj (input ){
Currinput=Input;
}

//Go to the previous line
FunctionGotolastinput (islast ){

If (currinput ! = null ) {

for ( var I = 0 , lth = arrinput. length; I lth; I + ) {
If (currinput = arrinput [I]) {

If (Islast ){ // Jump up

If (I ! =   0 ){

Arrinput [I -   1 ]. Focus ();

}
Else {

Arrinput [lth -   1 ]. Focus ();
}
}
Else { // Jump down

If (I < Lth - 1 ){

Arrinput [I +   1 ]. Focus ();
}

}
Break ;
}
}
}
}

//Jump up to input ******* end */

// // Add the enter line feed event to the text box
Function Loadenternav (){

VaR T = Document. getelementsbytagname ( " Input " )
For (I =   0 ; I < T. length; I ++ )
If (T [I]. Type =   " Text " ){

T [I]. onfocus = New function ( " setobj (this); this. style. backgroundcolor = '# cccccc'; this. select (); " )
T [I]. onblur = New function ( " This. style. backgroundcolor = '' " )

T [I]. onkeydown=Keydown;
T [I]. onkeyup=Keyup;
T [I]. onkeypress=Keypress;

//Save page text box
Arrinput. Push (T [I]);

}
}

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.