网站首页 网页特效 其他特效 正文
按下回车键自动切换文本框焦点的JS代码特效，当用户输入的表单文本比较多的时候，添加这么一个小功能，可提长用户体验，输入第一个表单，只需习惯性按下回车键，就可将输入焦点切换至下一个文本框，非常方便，而且本例子将让你学会如何实现这一功能。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>JS实现用回车键切换焦点www.cmylw.cn</title>
<style type="text/css">
<!--
body{font-family: "微软雅黑";font-size: 14px;}
.style1 {color: #FFFFFF}
input{padding: 0 5px;}
.wenbenkuang {
font-family: "微软雅黑";
font-size: 14px;
color: #333333;
border: 1px solid #999999;
}
-->
</style>
<script type="text/javascript">
function Myenter(str){
if (event.keyCode == 13){
str.focus();}
}
</script>
</head>
<body style="font-size:12px">
<table width="547" border="0" align="center" cellpadding="10" cellspacing="2">
<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"> <span class="style1">用户注册</span></td>
</tr>
<tr>
<td width="172" height="35" align="right">用户名称:</td>
<td width="328" height="35"><input name="用户名称" type="text" class="wenbenkuang" id="用户名称" maxlength="50" onKeyPress="Myenter(form1.密码)" /></td>
</tr>
<tr>
<td height="35" align="right">密
码:</td>
<td height="35"><input name="密码" type="password" class="wenbenkuang" id="密码" maxlength="50" onKeyPress="Myenter(form1.真实姓名)" /></td>
</tr>
<tr>
<td height="35" align="right">真实姓名:</td>
<td height="35"><input name="真实姓名" type="text" class="wenbenkuang" id="真实姓名" size="30" maxlength="50" onKeyPress="Myenter(form1.联系方式)" /></td>
</tr>
<tr>
<td height="35" align="right">联系方式:</td>
<td height="35"><input name="联系方式" type="text" class="wenbenkuang" id="联系方式" size="30" maxlength="30" onKeyPress="Myenter(form1.Email)" /></td>
</tr>
<tr>
<td height="35" align="right">E-mail:</td>
<td height="35"><input name="Email" type="text" class="wenbenkuang" id="Email" size="30" maxlength="100" onKeyPress="Myenter(form1.add)"/></td>
</tr>
<tr>
<td height="35" colspan="2" align="center"><input name="add" type="button" class="button" id="add" value="提 交" onClick="form1.submit();" />
<input type="reset" name="Submit2" value="重 置" class="button" /></td>
</tr>
</form>
</table></td>
</tr>
<tr>
<td height="8"></td>
</tr>
</table>
</body>
</html>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.cmylw.cn" target="_blank">残梦教程网</a>丨 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>猜你喜欢
- 2018-09-04 JS代码实现鼠标点击爱心特效
- 2018-08-13 HTML5响应式支持手机移动端手势滑动轮播图插件
- 2018-08-10 简单实用多功能导航菜单带幻灯轮播图搜索功能js特效插件
- 2018-08-10 美化大气实用多彩加载中canvas动画
- 2018-06-22 完美快速解决百度分享不支持HTTPS的问题
- 2018-06-18 带文字简介链接按钮幻灯轮播图特效动画切换jQuery插件
- 2018-06-15 JavaScript中click和onclick本质区别与用法分析
- 2018-06-09 JS使用createElement()动态添加HTML
- 2018-06-09 html5手机端弹出对话框动画特效代码
- 2018-06-07 纯CSS3实现炫酷动画效果下拉导航菜单特效代码
欢迎 你 发表评论:
- 网站分类
- 标签列表
本文暂时没有评论，来添加一个吧(●'◡'●)