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

一、总结

一句话总结：在onkeydown事件中判断event对象的键位码，然后focus事件。

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

1、案例描述

回车键切换焦点

  • 案例要点：在表单中经常会用到按回车键自动切换焦点的功能，该功能主要用到focus()事件已经键盘事件

2、相关知识点

Text 对象方法
  • blur()从文本域上移开焦点
  • Focus()在文本域上设置焦点
  • Select()选取文本域中的内容。

3、代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <style type="text/css">

     </style>

 </head>

 <body>

 <!-- <form name="form1" action="#">

     <p>测试文本框：<input name="txt" type="text" value="测试文本框"></p>

     <input type="button" value="按钮" onclick="eve()">

 </form> -->

 <h2>回车键切换焦点</h2>

     <form name="form1" action="" >

         <p>text1<input type="text" name="text1" onkeydown="swi(form1.text2)"></p>

         <p>text2<input type="text" name="text2" onkeydown="swi(form1.text3)"></p>

         <p>text3<input type="text" name="text3" onkeydown="swi(form1.text4)"></p>

         <p>text4<input type="text" name="text4" onkeydown="swi(form1.text1)"></p>

     </form>

 <script type="text/javascript">

     // function eve(){

     //     var txt=document.form1.txt;

     //     // txt.focus()

     //     // txt.blur()

     //     txt.select()

     // }

     function swi(str){

         if(event.keyCode==){

             str.focus()

         }

     }

 </script>

 </body>

 </html>
 
 

js进阶 9-9 html控件如何实现回车键切换焦点的更多相关文章

  1. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS：让自己的控件动起来

    代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...

  2. JS组件系列——Bootstrap 树控件使用经验分享

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  3. 使用JS控制struts的日期控件datetimepicker

    功能需求:页面主要有两个日历框,一个是当前日期,一个是去年同期,要求当用户改变当前日期时,同步修改去年同期为当前日期-1年. 当时刚接触到需求的第一时间想到的就是为< sx:datetimepi ...

  4. jquery.validate.js 一个jQuery验证格式控件

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  5. tbl.js div实现的表格控件,完全免费,no jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...

  6. tbl.js div实现的表格控件,完全免费,不依赖jquery

    html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...

  7. [转]js串口通信 调用MSCOMM32控件 链接电子秤

    本文转自:https://www.cnblogs.com/x-j-p/p/7819724.html 硬件环境:RS232转USB串口线*1 电子秤*1(本人采用G&G E600Y-C型号称重仪 ...

  8. js串口通信 调用MSCOMM32控件 链接电子秤(完整版实现方案)

    硬件环境:RS232转USB串口线*1 电子秤*1(本人采用G&G E600Y-C型号称重仪) 电子秤原装RS232数据线*1 计算机*1 软件环境:RS232转USB串口线驱动(这个可以在串 ...

  9. JS脚本动态给元素/控件添加事件

    最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...

随机推荐

  1. 【iOS开发-29】解决方式：TabBar的图片不显示，仅仅显示灰色的正方形

    (1)现象 tabbar上的图片变成一块正方形的灰色块块,原先的图片没有了. (2)原因 tabbar上的图片本质上不是一个图片.而是一个形状图片.系统对我们使用的图片也仅仅是把当中的形状" ...

  2. @Import注解

    转自:https://blog.csdn.net/heyutao007/article/details/74994161 @Import注解就是之前xml配置中的import标签,可以用于依赖第三方包 ...

  3. css基础属性

    color:设置文本颜色:属性值:1.表示颜色的英文单词,例如:red.blue.green.pink.purple.cyan等:2.十六进制表示法:#ff0000: 0.1.2...9.a.b.c. ...

  4. 【例 7-12 UVA - 1343】The Rotation Game

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 每次抽动操作最多只会让中间那一块的区域离目标的"距离"减少1. 以这个作为剪枝. 枚举最大深度. ...

  5. Dynamics CRM 2016 Web API 消息列表

    Function Name Description CalculateTotalTimeIncident Function Calculates the total time, in minutes, ...

  6. 8.Swift教程翻译系列——控制流之条件

    3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...

  7. DC中为什么要用Uniquify？

    转自:http://blog.sina.com.cn/s/blog_68c493870101exl7.html 为了在layout中进行时钟树的综合,网表在DC中必须被uniquified.所谓uni ...

  8. 【Codeforces Round #301 (Div. 2) C】 Ice Cave

    [链接] 我是链接,点我呀:) [题意] 给你一个n*m的地图. 每个地图为0的时候可以安全走过,且走过后变成1. (一定要离开之后才会变成1) 而为1的则走过之后会掉入下一层. 你一开始在初始位置( ...

  9. 【例题 6-15 UVA - 10129】Play on Words

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 拓扑大水题 [代码] #include <bits/stdc++.h> using namespace std; con ...

  10. 【例题 6-14 UVA-816】Abbott's Revenge

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 预处理出某个方向的左边.前边.右边是哪个方向就好了. 然后就是普通的bfs了. hash存到某个点,走到这里的方向的最小距离. df ...