js进阶 9-9 html控件如何实现回车键切换焦点
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控件如何实现回车键切换焦点的更多相关文章
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌JS:让自己的控件动起来
代码: using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace ...
- JS组件系列——Bootstrap 树控件使用经验分享
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- 使用JS控制struts的日期控件datetimepicker
功能需求:页面主要有两个日历框,一个是当前日期,一个是去年同期,要求当用户改变当前日期时,同步修改去年同期为当前日期-1年. 当时刚接触到需求的第一时间想到的就是为< sx:datetimepi ...
- jquery.validate.js 一个jQuery验证格式控件
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- tbl.js div实现的表格控件,完全免费,no jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于“虚 ...
- tbl.js div实现的表格控件,完全免费,不依赖jquery
html上现在有比较好用的表格控件是datatable,但是编辑.按钮等部分是收费的,只有基础功能免费.而且尺寸发生变化时需要手工刷新等繁琐操作较多.所以我开发一个免费的供大家使用. 本项目已用于&q ...
- [转]js串口通信 调用MSCOMM32控件 链接电子秤
本文转自:https://www.cnblogs.com/x-j-p/p/7819724.html 硬件环境:RS232转USB串口线*1 电子秤*1(本人采用G&G E600Y-C型号称重仪 ...
- js串口通信 调用MSCOMM32控件 链接电子秤(完整版实现方案)
硬件环境:RS232转USB串口线*1 电子秤*1(本人采用G&G E600Y-C型号称重仪) 电子秤原装RS232数据线*1 计算机*1 软件环境:RS232转USB串口线驱动(这个可以在串 ...
- JS脚本动态给元素/控件添加事件
最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础 ...
随机推荐
- mysql-cacti-templates-1.1.2.tar.gz 免费下载 cacti MySQL添加监控
cacti MySQL添加监控 1. 安装监控插件 wget http://mysql-cacti-templates.googlecode.com/files/mysql-cacti-templat ...
- wap.css
wap.css 一.总结 1.官方有教程:英语的 http://www.developershome.com/wap/wcss/ 2.wap.css :就是控制页面在手机端样式的 3.DOCTYPE ...
- Visual Studio Team Services持续集成到Github仓库
Devops如何用VSTS持续集成到Github仓库! 工欲善其事,必先利其器.在开始正式的教程之前我们先来聊聊准备工作. 管理工具会VSTS. 代码管理会用GITHUB. 服务器会用Azure. ...
- Writing Images to the Excel Sheet using PHPExcel--转载
原文地址:http://www.walkswithme.net/writing-images-to-the-excel-sheet-using-phpexcel Writing images to t ...
- v-for实现循环嵌套
<!DOCTYPE html> <html lang="en"> <head> <title></title> < ...
- app 自动化测试 Appium+python可以运行的代码
Appium
- Android SimpleAdapter
1.MainActivity.java public class MainActivity extends Activity { private ListView listView; private ...
- [D3] Adding Arrows to Links
svg.append('defs').selectAll('marker') .data(['end']).enter() .append('marker') .attr('id', String) ...
- [RxJS] How To get the results of two HTTP requests made in sequence
switchMap can chain two HTTP requests together, creating one request based on the results of the fir ...
- 资源下载https://msdn.itellyou.cn/
资源下载https://msdn.itellyou.cn/ 迅雷