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. Android控件：RadioButton(单选button)

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...

  2. PHP中 “ . ” 和 “ ，”的区别

    在PHP中,“ . ”可以串接两个变量.而“ , ”却没什么用处.

  3. JS原生选项卡 – 幻灯片效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. python序列中是否包含某个元素

    http://outofmemory.cn/code-snippet/9098/python-list-contains-with-in-not-in theList = ['a','b','c'] ...

  5. 【Android开发经验】我们要友好的告诉用户，程序要崩溃了

        转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992     尽管我们的程序在正式上线之前,都会经过严格的測试.从而保证程序的健壮性和良好的用户体验,可是 ...

  6. R语言-回归

    定义: 回归是统计学的核心,它其实是一个广义的概念,通常指那些用一个或多个预测变量来预测响应变量.既:从一堆数据中获取最优模型参数 1.线性回归 1.1简单线性回归 案例:女性预测身高和体重的关系 结 ...

  7. 软件——机器学习与Python，聚类，K——means

    K-means是一种聚类算法: 这里运用k-means进行31个城市的分类 城市的数据保存在city.txt文件中,内容如下: BJ,2959.19,730.79,749.41,513.34,467. ...

  8. 关于javascript中私有作用域的预解释

    1.如何区分私有变量还是全局变量 1).在全局作用域下声明(预解释的时候)的变量是全局变量 2).在“私有作用域中声明的变量”和“函数的形参”都是私有变量 在私有作用域中,我们代码执行的时候遇到一个变 ...

  9. 详解Spring Boot配置文件之多环境配置

    一. 多环境配置的好处: 1.不同环境配置可以配置不同的参数~ 2.便于部署,提高效率,减少出错~ 二. properties多环境配置 1. 配置激活选项 spring.profiles.activ ...

  10. javascript运算符应用

    下面的代码会输出什么?为什么? console.log(1 + "2" + "2"); console.log(1 + +"2" + &qu ...