<script language="JavaScript">
<!--
// 用途：enter 转化成tab
//使用：onload ="initEnter2Tab()" form标记加上 <form name="frm" type="enter2tab">...</form>
var isCycle = false; //当光标到最后一个元素的时候，是否循环光标焦点，
var iCurrent = -1;
var frmName = "0"//input_form
//
function enterToTab() //网页里按回车时焦点的转移
{
var e = document.activeElement;
if(e == null) return false;
//获得当前表单的名字
for(i=0;i<document.forms.length;i++){
for(var el in document.forms[i].elements){
if(e.UniqueID == el.UniqueID){
frmName = document.forms[i].name
}
}
}
if(window.event.keyCode == 13)
{
switch(e.tagName)//标签类型
{
case "INPUT":
handleInput(e)
break;
case "SELECT":
handleSelect(e)
break;
case "TEXTAREA":
handleTextarea(e)
break;
default:
//window.status = "未知的标签名称:"+e.tagName+"，不能移动焦点！"
}
}// end if
}
//处理input 标签类型
function handleInput(e)
{
switch(e.type)
{
case "text":
case "password":
case "checkbox":
case "radio":
case "file":
moveFocusToNextElement(e)
break;
case "submit"://处理有提交按钮的情况
case "button":
if(isHandleSubmit(e)){
handleSubmit(e)
focusOnNextElement(document.forms[frmName].elements,iCurrent-1)
break;
}
moveFocusToNextElement(e)
break;
default:
}
}
//处理select 标签类型
function handleSelect(e)
{
moveFocusToNextElement(e)
}
//处理textarea 标签类型
function handleTextarea(e)
{
moveFocusToNextElement(e)
}
//移动到下一个元素
function moveFocusToNextElement(e)
{
var oE = document.forms[frmName].elements, iCurentPos=-1;
for(var i=0; i<oE.length; i++)
{
if(oE[i] == e) iCurentPos = i;
if(iCurentPos>-1 && iCurentPos+1<oE.length)
{
//把焦点设置到下一个可用的元素上
focusOnNextElement(oE,iCurentPos)
}
}
}
//下一个可用元素得到焦点 n 元素的位置
function focusOnNextElement(oElements,iIndex)
{
var oE = oElements
var oldIndex = iIndex
while(oE[iIndex+1].type =="hidden" || oE[iIndex+1].disabled || oE[iIndex+1].readOnly == true || oE[iIndex+1].style.display == "none")
{
/*
window.status += "e.name = "+oE[iIndex+1].name
window.status += ";e.type = "+oE[iIndex+1].type
window.status += ";e.disabled = "+oE[iIndex+1].disabled
window.status += ";e.readOnly = "+oE[iIndex+1].readOnly+"."
*/
iIndex++;
if(iIndex+1 == oE.length)
{
if(isCycle){//设置焦点在第一元素
focusOnNextElement(oE,-1)
}
return;
}
}//end while
iCurrent = iIndex+1
oE[iCurrent].focus();
window.event.keyCode = 0;
window.event.returnValue= false;
return;
}
//处理当前元素
function handleSubmit(element)
{
element.click()
return;
}
//判断是否处理提交
function isHandleSubmit(element)
{
var ret = false;
if(element !=null && (element.id.toUpperCase() == "SUBMIT" || element.name.toUpperCase() == "SUBMIT" || element.isSubmit)){
ret = true;
}
return ret;
}
//初始化 initEnter2Tab()
function initEnter2Tab()
{
for(i=0;i<document.forms.length;i++){
if(document.forms[i].type !=null && document.forms[i].type == "enter2tab"){
document.forms[i].onkeydown = function f(){enterToTab();};
}
}
//文档初始化焦点
if(document.forms[0].elements != null)
focusOnNextElement(document.forms[0].elements,-1)
}
//-->
</script>
<body onload="initEnter2Tab()">
<form method=post action="" type="enter2tab" name="aa">
<input type="text" name=""><input type="text" name=""><input type="submit">
</form>
分享到：
相关推荐
函数和网上的一些代码，弄了一个可以满足上述需求的解决方案，它的特性包括： <br/> 全部JavaScript代码都封装在了一个用户控件"EnterAsTab_SubPage.ascx"中，哪个页面想要回车变Tab或者屏蔽掉回车键只要把...
用回车键代替TAB。
javascript实现回车键切换tab功能的知识点涵盖了网页开发中对用户交互行为的处理。在页面中使用表格（tab）进行数据的录入和切换是常见的场景，尤其是在需要填写大量数据的时候。然而，当用户在使用小键盘（如数字小...
### JavaScript 实现回车键替换为 Tab 键 在网页表单输入中，有时我们希望用户在填写完一个输入框后能自动跳转到下一个输入框，而不是直接提交表单。这种情况下，将用户的回车键操作转换为 Tab 锵的操作会非常有用...
本文将详细介绍一个简单的JavaScript脚本，该脚本的功能是在用户按下回车键（Enter键）时将其替换为Tab键的行为。这种技术在Web表单中非常有用，可以改善用户体验，避免用户在填写表单时意外提交表单。 #### 代码...
js 实现 Enter键实现Tab键功能! 值得下载看看!资源免费,大家分享!!
### 火狐浏览器下将回车键事件转换为Tab键事件的解决方案 在Web开发过程中，有时我们需要处理用户在不同浏览器中的键盘操作差异。本文将详细介绍如何在Firefox（火狐）浏览器中将用户按下回车键的行为转换为按下Tab...
近期在做一个Web项目，我使用DevExpress第三方控件。 由于该控件使用技巧中文资料... 首先，得准备要模拟Tab的JS代码，这网上很多，我随便D了一个，试试有用，贴出如下： 代码如下://回车键模拟tab 在onkeydown中 func
enter键替换tab键！JS文件，使用时需要初始化，各标签最好能标识TableIndex更容易控制，具体操作可参考我的博客文章
关键之处在于tabindex，其设计思想是：为每个表单元素设置一个tabindex，其值分别为前一个表单元素的tabindex的值加一，函数的功能就是当用户按下回车键时先将当前tabindex的值加一，而后逐一与每个表单元素的...
在上述代码示例中，我们看到了一个用JavaScript实现的方案，用于将回车键事件转换为表单元素的焦点切换。这段代码的工作原理如下： 1. 首先，通过`document.getElementsByTagName("input")`获取所有输入元素（input...
在探讨“Ext.net Enter实现Tab功能”的主题时，我们深入剖析了如何利用JavaScript与Ext.net框架结合，将Enter键的功能转换为Tab键的功能，从而在Web应用中提供更灵活、更用户友好的交互体验。 ### 核心概念：Ext...
首先编写了一个名为EnterAsTab的JavaScript函数，该函数的工作原理是在表单的所有控件中遍历，当检测到回车键被按下时，忽略当前控件的回车行为，转而将焦点移动到下一个控件。 具体实现时，此函数通过检查event....
在前端开发中，Vue.js是一个流行的JavaScript框架，它用于构建用户界面和单页应用程序。用户界面中经常会涉及到键盘操作，例如使用Tab键和Enter键来切换焦点。但实际情况下，用户需求千变万化，有时候用户会提出使用...
当检测到回车键(`keyCode`值为13)并且`TextBox1`中的值非空时，会阻止默认的回车行为，并模拟一个Tab键事件。 #### 方法二：通过属性添加事件处理 另一种方式是在服务器端的`PageLoad`事件中，通过设置`TextBox`...
"AOM中IE、Firefox兼容Enter代替Tab的Javascript"这个主题关注的是如何在不同的浏览器环境中，尤其是IE和Firefox中，使用JavaScript实现按下回车键(Enter)时模拟Tab键的效果，以实现元素间的焦点切换。 首先，我们...
在传统的键盘操作中，Tab键被广泛用于在表单字段间进行切换，而回车键（Enter）则常用于提交表单或执行特定的操作。然而，有些设计可能选择让回车键替代Tab键在表单字段间移动焦点，以提供更加符合用户直觉的操作...