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. [D3] Add label text

    If we want to add text to a node or a image // Create container for the images const svgNodes = svg ...

  2. python3 购物车小程序，余额写入文件保存

    python3 购物车小程序,余额写入文件保存 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wan goods = ( ...

  3. （嵌入式开发）移植最新uboot

    一:准备移植 1.从下面的官网下载最新的U-boot.用google英文版搜索最新的u-boot源码  ftp://ftp.denx.de/pub/u-boot/ 2.建立sourceinsight工 ...

  4. (转)const char to LPCTSTR不能转化问题

    转: const char to LPCTSTR不能转化问题 Visual C++ 2008里cannot convert parameter 1 from 'const char [13]' to ...

  5. 每日技术总结：setInterval,setTimeout,文本溢出,小程序，wepy

    前言: 项目背景:vue,电商,商品详情页 1.倒计时,倒计到0秒时停止 data () { return { n: 10 } }, created () { let int = setInterva ...

  6. thinkphp自动完成、软删除 和时间戳

    thinkphp自动完成.软删除 和时间戳 一.总结 自动完成:没有手动赋值的情况下进行手动处理 软删除:实现假删除,可以进行恢复 时间戳:系统支持自动写入创建和更新的时间戳字段 二.thinkphp ...

  7. TCP套接字编程模型及实例

    摘要:     本文讲述了TCP套接字编程模块,包括服务器端的创建套接字.绑定.监听.接受.读/写.终止连接,客户端的创建套接字.连接.读/写.终止连接.先给出实例,进而结合代码分析. PS:本文权当 ...

  8. 关于DMA

    用串口在dma中发东西的时候,,, 要判断DMA里是不是由东西,是不是在占用 当多个外设再用DMA的时候,,,要查看DMA有没有占用 一包数没发完,不要再传另一包

  9. POJ 2642 The Brick Stops Here 0-1背包

    poj: http://poj.org/problem?id=2642 大意: 给出n(n<=200)块黄铜合金,还有它们的浓度和价钱.给出若干个个询问使它们在n块中取 M 块 使得这M块合金的 ...

  10. ZOJ 1136 Longest Ordered Subsequence DP

    传送门:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1136 题目大意:给定一串序列,求最长的升序列长度,如1, 7, 3, ...