在工作中许多时候需要考虑到用户体验，当按下回车键时切换input选框就来得十分必要。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>按下回车键时自动切换焦点</title>
<style type="text/css">
.style1 {color: #FFFFFF}
.wenbenkuang {
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
</style>
 
</head>
<body style="font-size:12px">
<table width="547" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td height="8"></td>
  </tr>
  <tr>
  <td valign="top"><table width="532" border="0" align="center" cellpadding="0" cellspacing="0">
  <form name="form1">
  <tr>
  <td height="27" colspan="2" align="left" class="font_white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="style1">用户注册</span></td>
  </tr>
  <tr>
  <td width="172" height="22" align="right">用户名称:</td>
  <td width="328" height="22"><input name="用户名称" type="text" class="wenbenkuang" id="用户名称" maxlength="50" onKeyPress="Myenter(form1.密码)" /></td>
  </tr>
  <tr>
  <td height="22" align="right">密
  码:</td>
  <td height="22"><input name="密码" type="password" class="wenbenkuang" maxlength="50" onKeyPress="Myenter(form1.真实姓名)" /></td>
  </tr>
  <tr>
  <td height="22" align="right">真实姓名:</td>
  <td height="22"><input name="真实姓名" type="text" class="wenbenkuang" id="真实姓名" size="30" maxlength="50" onKeyPress="Myenter(form1.联系方式)" /></td>
  </tr>
  <tr>
  <td height="22" align="right">联系方式:</td>
  <td height="22"><input name="联系方式" type="text" class="wenbenkuang" id="联系方式" size="30" maxlength="30" onKeyPress="Myenter(form1.Email)" /></td>
  </tr>
  <tr>
  <td height="22" align="right">E-mail:</td>
  <td height="22"><input name="Email" type="text" class="wenbenkuang" id="Email" size="30" maxlength="100" onKeyPress="Myenter(form1.add)"/></td>
  </tr>
  <tr>
  <td height="22" colspan="2" align="center"><input name="add" type="button" class="button" id="add" value="提 交" onClick="form1.submit();" />
&nbsp;
  <input type="reset" name="Submit2" value="重 置" class="button" /></td>
  </tr>
  </form>
  </table></td>
  </tr>
  <tr>
  <td height="8" ></td>
  </tr>
</table>
<script type="text/javascript">
function Myenter(str){
//判断是否点击回车，是的话str获取焦点
  if (event.keyCode == 13){
  str.focus();}
}
</script>
</body>
</html>

回车切换input选框的更多相关文章

  1. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  2. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  3. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  4. jquery点击复选框触发事件给input赋值

    体验效果:http://keleyi.com/keleyi/phtml/jqtexiao/31.htm 代码如下: <!DOCTYPE html> <html xmlns=" ...

  5. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  6. input单选框全选与反选

    input单选框全选与反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. 关于bootstrap--表单（下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>）

    html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...

  8. 前端 HTML form表单标签 input标签 type属性 checkbox 多选框

    多选框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  9. input标签（单选框和复选框）

    单选框: <form> <input type="radio" name="..." value="..." checke ...

随机推荐

  1. [zz]C#多线程环境下调用 HttpWebRequest 并发连接限制

    .net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制,这个限制在桌面操作系统如 windows xp , windows 7 下默认是2,在服务器操作系 ...

  2. leetcode 1041——困于环中的机器人

    描述: 在无限的平面上,机器人最初位于 (0, 0) 处,面朝北方.机器人可以接受下列三条指令之一: "G":直走 1 个单位 "L":左转 90 度 &quo ...

  3. PAT_A1038#Recover the Smallest Number

    Source: PAT A1038 Recover the Smallest Number (30 分) Description: Given a collection of number segme ...

  4. centos7.3 编译安装 git 2.13

    安装依赖包 sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel 安装 $ ...

  5. 2.4 Nginx服务器基础配置指令

    2.4.1 nginx.conf文件的结构 2.4.2配置运行Nginx服务器用户(组) 2.4.3配置允许生成的worker process数 2.4.4 配置Nginx进程PID存放路径 2.4. ...

  6. Apriori-关联规则挖掘算法

    Apriori算法采用的是自底向上的方法,从1-频繁集开始,逐步找出高阶频繁集. 它的基本流程是:第一次扫描交易数据库D时,产生1- 频繁集.在此基础上经过连接.修剪产生2-频繁集.以此类推,直到无法 ...

  7. python读取文件报错：pandas.errors.ParserError: iterator should return strings, not bytes (did you open the file in text mode?)

    python 读取csv文件报错问题 import csv with open('E:/Selenium2script/DDT模块/test.csv','rb') as f: readers = cs ...

  8. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  9. C#异步编程----async和await组合的写法

    微软示例: private async void StartButton_Click(object sender, RoutedEventArgs e) { // ExampleMethodAsync ...

  10. ant design 两个tabs如何同时切换

    假设界面上有两个地方用到了同一个tabs,但是切换其中一个tabs,另一个tabs并不会同时切换,因为只是在其中一个tabs上调用了onChange,所以需要用到activeKey动态地设置tabs的 ...