微信扫一扫打赏支持

js进阶 9-9 html控件如何实现回车键切换焦点

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>

 

 

 

 

 

 

 

 

 

 

 
 
posted @ 2018-06-10 23:59  范仁义  阅读(621)  评论(0)  编辑  收藏  举报