在工作中许多时候需要考虑到用户体验，当按下回车键时切换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. RabbitMQ使用(一)

    1. 安装与使用 1. 激活 RabbitMQ's Management Plugin (前面跟绝对路径) "D:\娱乐\rabbitmq_server-3.6.5\sbin\rabbitm ...

  2. ICPC Asia Nanning 2017 L. Twice Equation (规律 高精度运算)

    题目链接:Twice Equation 比赛链接:ICPC Asia Nanning 2017 Description For given \(L\), find the smallest \(n\) ...

  3. PAT_A1139#First Contact

    Source: PAT A1139 First Contact (30 分) Description: Unlike in nowadays, the way that boys and girls ...

  4. （转载） 深入理解ES6箭头函数的this以及各类this面试题总结

    声明:本文转载自 https://blog.csdn.net/yangbingbinga/article/details/61424363 ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取 ...

  5. 错误 1 error C4996: 'getcwd': The POSIX name for this item is deprecated. Instead, use the ISO C++ conformant name: _getcwd. See online help for details.

    解决办法: 属性>C/C++>预处理定义>编辑>添加_CRT_NONSTDC_NO_DEPRECATE>应用

  6. Hbase时间同步

    如果Hbase的时间没有同步,启动主节点会起来,子节点的regionServer就不会起来. 错误日志如下: aused by: org.apache.hadoop.hbase.ipc.RemoteW ...

  7. poj 3258 二分

    题意:看了很久才懂,有n个石头,去掉m个后,求跳两个石头或石头和岸边距离最小的最大值,就是至少要跳的距离的最大. 参考博客: 代码: #include<stdio.h> #include& ...

  8. xxd - 以十六进制形式表示

    总览 (SYNOPSIS) xxd -h[elp] xxd [options] [infile [outfile]] xxd -r[evert] [options] [infile [outfile] ...

  9. 笔记57 Mybatis和Hibernate的比较

    一.Hibernate和MyBatis简介 1.Hibernate简介 Hibernate对数据库结构提供了较为完整的封装,Hibernate的O/R Mapping实现了POJO 和数据库表之间的映 ...

  10. ubuntu phpize 安裝

    php 版本 7.2,所以安裝 php7.2的 sudo apt-get install php7.2-dev 參考 Is is possible to install phpize for PHP7 ...