js进阶 9-9 html控件如何实现回车键切换焦点
一、总结
一句话总结：在onkeydown事件中判断event对象的键位码，然后focus事件。
二、js进阶 9-9 html控件如何实现回车键切换焦点
1、案例描述
回车键切换焦点
-
案例要点：在表单中经常会用到按回车键自动切换焦点的功能，该功能主要用到focus()事件已经键盘事件
2、相关知识点
Text 对象方法
- blur()从文本域上移开焦点
- Focus()在文本域上设置焦点
- Select()选取文本域中的内容。
3、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文档</title> 6 <style type="text/css"> 7 </style> 8 </head> 9 <body> 10 <!-- <form name="form1" action="#"> 11 <p>测试文本框：<input name="txt" type="text" value="测试文本框"></p> 12 <input type="button" value="按钮" onclick="eve()"> 13 </form> --> 14 <h2>回车键切换焦点</h2> 15 <form name="form1" action="" > 16 <p>text1<input type="text" name="text1" onkeydown="swi(form1.text2)"></p> 17 <p>text2<input type="text" name="text2" onkeydown="swi(form1.text3)"></p> 18 <p>text3<input type="text" name="text3" onkeydown="swi(form1.text4)"></p> 19 <p>text4<input type="text" name="text4" onkeydown="swi(form1.text1)"></p> 20 </form> 21 <script type="text/javascript"> 22 // function eve(){ 23 // var txt=document.form1.txt; 24 // // txt.focus() 25 // // txt.blur() 26 // txt.select() 27 // } 28 function swi(str){ 29 if(event.keyCode==13){ 30 str.focus() 31 } 32 } 33 </script> 34 </body> 35 </html>