I learned HTML and CSS some time ago, became interested in this area, and began to learn advanced programming in javascript (third edition). I have 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 the moving keys up and down left and right to move the focus from one text box to the previous or next text box. I tried to write code using the knowledge I have learned so far. I encountered several difficulties in writing: modulus calculation; use this and arguments to find the trigger event inside the function; use the addHandler() method to add event handlers to the event. With the help of the teacher, I solved the above problems. I felt that I had learned a lot of knowledge through this code, so I wrote a comment after sorting it out and published it.
The code copy 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 key
case 39: //Move the key to the right
case 40: //Move down key
isDown = true;
break;
case 37: //Move the key to the left
case 38: //Move Up key
isDown = false;
break;
}
return isDown;
}
function key_up(){
//When calling the function, the function itself will generate this and arguments
// Use this and arguments to find the field and trigger events 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 last text box is gained focus
//(-1===i && !is_down) --> Press the up key after the first text box is focused
if((0===i && is_down)||(-1===i && !is_down)){
return true;
}
elements[i].focus();
var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];
if (element_arr.join(',').indexOf(elements[i].type) > -1)
elements[i].select();
return false;
}
//Cancel Enter the default submission form event
document.onkeydown = function(e) {
e = e || window.event;
if(e.keyCode == 13) {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
};
//Recognize addEventListener and attachEvent(IE) across browsers
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 key_up event handler for 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, and all the things that should be taken into account have been processed. I hope everyone likes it.