Home > Developer > JavaScript
Javascript implements switching focus by pressing the Enter key, and javascript focus
Some time ago I learned HTML and CSS, and I was interested in this aspect. I also started to learn javascript advanced programming (the third edition). I 've been learning these days and just learned the content of events and form scripts. A few days ago, the teacher asked me to write a piece of code: In a javascript form, use the Enter key and move the key up or down to move the focus from a text box to the previous or next text box. I tried to write code using the knowledge I have learned so far, and encountered several difficulties during the compilation process: modulo computing; using this and arguments inside the function to locate the trigger event; using addHandler () method to add an event handler for the event. With the help of the teacher, I solved the above problems and felt that I had learned a lot through this code. So after finishing the work, I wrote a comment and wrote a comment.
Copy codeThe Code is as follows:
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Form>
<Div> <input type = "text"> </div>
<Div> <input type = "text"> </div>
<Div> <input type = "text"> </div>
<Div> <input type = "text"> </div>
<Div> <input type = "text"> </div>
<Div> <input type = "submit"> </div>
</Form>
<Script>
Function is_down (e ){
Var isDown;
E = e | window. event;
Switch (e. keyCode ){
Case 13: // enter the key
Case 39: // move the key to the right
Case 40: // move the key down
IsDown = true;
Break;
Case 37: // move the key to the left
Case 38: // move the key up
IsDown = false;
Break;
}
Return isDown;
}
Function key_up (){
// When a function is called, the function itself generates this and arguments
// Use this and arguments to locate the field and the triggered event respectively.
Var e = arguments [1];
Return is_down (e) === undefined? True: handle_element (this, is_down (e ));
}
Function handle_element (field, is_down ){
Var elements = field. form. elements;
For (var I = 0, len = elements. length-1; I <len; I ++ ){
If (field = elements [I]) {
Break;
}
}
I = is_down? (I + 1) % len: (I-1) % len;
// (0 = I & is_down) --> press the down key after the focus is obtained in the last text box.
// (-1 ==== I &&! Is_down) --> press the up key after the first text box obtains the focus
If (0 = I & is_down) | (-1 = I &&! Is_down )){
Return true;
}
Elements [I]. focus ();
Var element_arr = ['twent', 'submit ', 'reset', 'select-one', 'textarea'];
If (element_arr.join (','). indexOf (elements [I]. type)>-1)
Elements [I]. select ();
Return false;
}
// Cancel carriage return default form submission event
Document. onkeydown = function (e ){
E = e | window. event;
If (e. keyCode = 13 ){
E. preventDefault? E. preventDefault (): (e. returnValue = false );
}
};
// Cross-browser recognition of addEventListener and attachEvent (IE)
Function addHandler (element, type, handler ){
If (element. addEventListener)
Element. addEventListener (type, handler, false );
Else if (element. attachEvent)
Element. attachEvent ("on" + type, handler );
Else
Element ["on" + type] = handler;
}
Var elements = document. forms [0]. elements;
For (var I = 0, len = elements. length; I <len; I ++ ){
// Add a key_up event handler for the keyup event
AddHandler (elements [I], "keyup", key_up );
}
</Script>
</Body>
</Html>
The above is all the content of the code. I personally feel that the writing is quite comprehensive. I hope everyone will like it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
