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. FFmpegh.264解码

    - (int)DecodeH264Frames: (unsigned char*)inputBuffer withLength:(int)aLength { ; ; av_init_packet(&a ...

  2. Android之——图片的内存优化

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46972817 1. 对图片本身进行操作 尽量不要使用 setImageBitmap ...

  3. Validation failed for query for method public abstract boxfish.bean.Student boxfish.service.StudentServiceBean.find(java.lang.String)!

    转自:https://blog.csdn.net/lzx925060109/article/details/40323741 1. Exception in thread "main&quo ...

  4. POJ 3617 Best Cow Line ||POJ 3069 Saruman's Army贪心

    带来两题贪心算法的题. 1.给定长度为N的字符串S,要构造一个长度为N的字符串T.起初,T是一个空串,随后反复进行下面两个操作:1.从S的头部删除一个字符,加到T的尾部.2.从S的尾部删除一个字符,加 ...

  5. python3 随机生成6位数的验证码

    python3 随机生成6位数的验证码 要求是数字:0~9 及大小写字母. #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung ...

  6. Linux定时器的使用（三种方法）

    使用定时器的目的无非是为了周期性的执行某一任务,或者是到了一个指定时间去执行某一个任务.要达到这一目的,一般有两个常见的比较有效的方法.一个是用linux内部的三个定时器,另一个是用sleep, us ...

  7. Swift UIView 层次调整

    Swift 中添加的UIView都是有层级的. 我们先添加三个看一看 let view1=UIView(frame: CGRectMake(10, 50, 200, 200)) let view2=U ...

  8. 连接mongodb，kafka异步处理代码

    1. mongodb异步处理 依赖: <dependencies> <dependency> <groupId>org.mongodb</groupId> ...

  9. stm32的串口中断

    下面有很多问题没有验证: 在设置USART_CR1中的TE位时,会发送一个空闲帧作为第一次数据发送, 目前我所了解的串口中断发送,有两种方式: 一个是:TC 一个是:TXE 这是判断两个标志位, 第一 ...

  10. [Angular] Angular Global Keyboard Handling With EventManager

    If we want to add global event handler, we can use 'EventManager' from '@angular/platform-broswer'. ...