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. 第一个使用Spring Tool Suite(STS)和Maven建立的Spring mvc 项目

    一.目标 在这篇文章中.我将要向您展示怎样使用Spring Frameworks 和 Maven build创建您的第一个J2ee 应用程序. 二.信息 Maven是一个java项目的构建工具(或者自 ...

  2. xcode6.3 模版位置

    /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/Xcode/Templ ...

  3. 106.TCP传文件

    客户端 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include < ...

  4. HTTP网络协议(三）

    HTTP首部字段有四种类型:通用首部字段,请求首部字段,响应首部字段,实体首部字段.  通用首部字段: 首部字段 说明 Cache-Control 控制缓存的行为 Connection 逐跳首部.连接 ...

  5. oled的一套stm32实验2(自己的实验)

    stm32与OLED屏接口的引脚介绍: CS————GPIOD3: RST————GPIOD4: DC—————GPIOD5: D0——————GPIOD6: D1——————GPIOD7; 上是我参 ...

  6. rz、sz （上传下载）命令参数的解释

    $ man rz,查看帮助: -a, –ascii -b, –binary 用binary的方式上传下载,不解释字符为 ascii -e, –escape 强制escape 所有控制字符,比如 Ctr ...

  7. JSONModel

    JSONModel 一个解析 JSON 数据的开源库,可以将 JSON 数据直接解析成自定义的 model ,其中对数据类型的检查和对数据类型的转换比较贴心.最近在项目中使用了以后觉得确实方便很多,推 ...

  8. SpringBoot日志logback-spring.xml分环境（转）

    springboot按照profile进行打印日志 log4j logback slf4j区别? 首先谈到日志,我们可能听过log4j logback slf4j这三个名词,那么它们之间的关系是怎么样 ...

  9. ZOJ List the Books 水~

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1727 题目大意: 给你书名.出版时间.价格,让你按照一定的顺序排序.. 其中题 ...

  10. View的事件分发机制解析

    引言 Android事件构成 在Android中,事件主要包含点按.长按.拖拽.滑动等,点按又包含单击和双击,另外还包含单指操作和多指操作.全部这些都构成了Android中的事件响应.总的来说.全部的 ...