I learned HTML and CSS some time ago and became interested in this aspect. I also started to learn JavaScript Advanced Programming (Third Edition). I have been learning these days and just learned about 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 up, down, left, and right keys to move the focus from one text box to the previous or next text box. Applying the knowledge learned so far, I tried to write code. I encountered several difficulties during the writing process: modulo calculation; using this and arguments inside the function to find the triggering event; using the addHandler() method to add an event handler to the event. With the help of the teacher, I solved the above problems. I feel that I have learned a lot of knowledge through this code, so I will write comments after finishing it and publish it.
<script><br>
function is_down(e) {<br>
var isDown;<br>
e = e || window.event;<br>
switch (e.keyCode) {<br>
case 13: //Enter key<br>
case 39: //Move right key<br>
case 40: //Move down key<br>
isDown = true;<br>
break;<br>
case 37: //Move left key<br>
case 38: //Move up key<br>
isDown = false;<br>
break;<br>
}<br>
return isDown;<br>
}<br>
function key_up(){<br>
//When calling a function, the function itself will generate this and arguments<br>
//Use this and arguments to find the field and triggered event respectively<br>
var e=arguments[1];<br>
return is_down(e) === undefined ? true : handle_element(this, is_down(e));<br>
}<br>
function handle_element(field, is_down) {<br>
var elements = field.form.elements;<br>
for (var i = 0, len = elements.length-1; i < len; i ) {<br />
If (field == elements[i]) {<br />
break;<br />
}<br />
}<br />
i = is_down ? (i 1) % len : (i - 1) % len;<br />
//(0===i && is_down) --> After the last text box gets focus, press the down key <br>
//(-1===i && !is_down) --> After the first text box gets focus, press the up key <br>
If((0===i && is_down)||(-1===i && !is_down)){<br>
return true;<br>
}<br>
elements[i].focus();<br>
var element_arr = ['button', 'submit', 'reset', 'select-one', 'textarea'];<br>
If (element_arr.join(',').indexOf(elements[i].type) > -1)<br>
elements[i].select();<br>
return false;<br>
}<br>
//Cancel the default submission form event on Enter<br>
document.onkeydown = function(e) {<br>
e = e || window.event;<br>
If(e.keyCode == 13) {<br>e.preventDefault ? e.preventDefault() : (e.returnValue = false);<br>
}<br>
};<br>
//Cross-browser recognition addEventListener and attachEvent(IE)<br>
function addHandler(element, type, handler) {<br>
if (element.addEventListener)<br>
element.addEventListener(type, handler, false);<br>
else if (element.attachEvent)<br>
element.attachEvent("on" type, handler);<br>
else<br>
element["on" type] = handler;<br>
}<br>
var elements = document.forms[0].elements;<br>
for (var i = 0, len = elements.length; i < len; i ) {<br />
//Add key_up event handler for keyup event<br />
addHandler(elements[i], "keyup", key_up);<br />
}<br />
</script>
The above is the entire content of the code. Personally, I feel that the writing is quite comprehensive, and all the places that should be taken into consideration have been dealt with. I hope everyone will like it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
