jsp 回车代替tab 自动切换text焦点
方法一keyCode = (IE11以后失效)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用回车来进行切换功能</title>
<script language="javascript">
function check() {
//keyCode是event事件的属性,对应键盘上的按键,回车键是13,tab键是9,其它的如果不知道 ,查keyCode大全
if (event.keyCode == 13 && event.srcElement.type == "text") {
//srcElement是触发事件的对象,type意思是什么类型
window.event.keyCode = 9;
}
}
document.onkeydown = check;
</script>
</head> <body>
<input name="" type="text" />
<input name="" type="text" />
<input name="" type="text" />
<input name="" type="text" />
<input name="" type="text" />
<input name="" type="text" />
<input type="button" />
<input type="password" />
</body>
</html>
方法二 body onkeydown (IE11以后失效)
<body onkeydown="if(window.event.keyCode==13){ window.event.keyCode=9}">
<input id="txtCode" type="text" />
<input id="txtCode2" type="text" />
</body>
方法三 name onKeyPress focus,有效果,繁琐不灵活
<script type="text/javascript">
function Myenter(str) {
if (event.keyCode == 13) {
str.focus();
}
}
</script> <input name="id" type="text" onKeyPress="Myenter(aname)">
<input name="aname" type="text" onKeyPress="Myenter(asex)" />
<input name="asex" type="text" />
方法四 name onkeypress handleEnter有效果,必须在form 里
<script type="text/javascript">
function handleEnter(field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
: event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
} else
return true;
}
</script>
<form action="">
<input name="" type="text" onkeypress="return handleEnter(this, event)"/>
<input name="" type="text" onkeypress="return handleEnter(this, event)"/>
<input name="" type="text" onkeypress="return handleEnter(this, event)"/>
<input name="" type="text" onkeypress="return handleEnter(this, event)"/>
<input name="" type="text" onkeypress="return handleEnter(this, event)"/>
<input name="" type="text" onkeypress="return handleEnter(this, event)"/> </form>
方法五 jquery 未测到效果
$(function() {
$("form[name='articleForm'] input:text").keypress(function(e) {
if (e.which == 13) // 判断所按是否回车键
{
var inputs = $("form[name='articleForm']").find(":text"); // 获取表单中的所有输入框
var idx = inputs.index(this); // 获取当前焦点输入框所处的位置
if (idx == inputs.length - 1) // 判断是否是最后一个输入框
{
if (confirm("最后一个输入框已经输入,是否提交?")) // 用户确认
$("form[name='articleForm']").submit(); // 提交表单
} else {
inputs[idx + 1].focus(); // 设置焦点
inputs[idx + 1].select(); // 选中文字
}
return false;// 取消默认的提交行为
}
});
});
方法六 jquery 未测到效果
<script type="text/javascript">
jQuery(function () {
jQuery('input:text:first').focus();
var $inp = jQuery('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
jQuery(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
jsp 回车代替tab 自动切换text焦点的更多相关文章
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- [C#]Winform下回车或Tab键自动切换下一个控件焦点
满足用户体验,在数据录入时,能在输入完一个信息后通过回车或Tab键自动的切换到下一个控件(字段). 在界面控件设计时,默认可以通过设置控件的TabIndex来实现.但在布局调整时或者是对输入的内容有选 ...
- bootstrap tab切换如何让鼠标移动自动切换内容
bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...
- Enter回车切换输入焦点方法兼容各大浏览器
做项目时,客户要求能够用enter回车直接切换输入(焦点),当最后一个时候,直接提交信息. 第一想法就是,网上去copy一段代码直接用.但了百度.谷歌找了个遍,找到的代码80%以上都是一样的.有的代码 ...
- jquery Tab默认情况下自动切换
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...
- javascript实现自动切换焦点功能学习
当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入? 为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用 ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- Qt之Tab键切换焦点顺序
简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...
- 【Qt】Qt之Tab键切换焦点顺序【转】
简介 Qt的窗口部件按用户的习惯来处理键盘焦点.也就是说,其出发点是用户的焦点能定向到任何一个窗口,或者窗口中任何一个部件. 焦点获取方式比较多,例如:鼠标点击.Tab键切换.快捷键.鼠标滚轮等. 习 ...
随机推荐
- 使用migration创建表时,出错的解决方法
Laravel 5.4 migrate时报错: Specified key was too long error 解决问题升级MySql版本到5.5.3以上. 手动配置迁移命令migrate生成的默认 ...
- nexage video asset tag
video ad can't show InLine must match the example ,and xml content is Case Sensitive https:/ ...
- DOS批处理 - 函数教程
DOS Batch - Function Tutorial What it is, why it`s important and how to write your own. Description: ...
- vue-cli、webpack提取第三方库-----DllPlugin、DllReferencePlugin
需要安装的插件有 extract-text-webpack-plugin assets-webpack-plugin clean-webpack-plugin npm install extract- ...
- shell教程-002:常见的Shell种类
Shell是一种脚本语言,那么,就必须有解释器来执行这些脚本. Unix/Linux上常见的Shell脚本解释器有bash.sh.csh.ksh等,习惯上把它们称作一种Shell.我们常说有多少种Sh ...
- 安装EKL
elasticsearch rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch /etc/yum.repos.d/ela ...
- golang channel 的使用
本文对channel使用中的几个疑惑,以例子的形式加以说明. 普通channel 缺省情况下,发送和接收会一直阻塞着,直到另一方准备好. 例如: package main import ( " ...
- hello world之Makefile
hello world之Makefile
- 转Python 和C#的交互
http://www.cnblogs.com/wilber2013/category/708919.html IronPython和C#交互 IronPython是一个.NET平台上的Python ...
- 学习笔记之Moq
dotnet/src/MoqSample at master · haotang923/dotnet · GitHub https://github.com/htanghtang/dotnet/tre ...