您的位置：首页 > Web前端 > JavaScript

javascript使回车键替代tab键的光标移动功能

2011-09-03 21:04 323 查看

javascript使回车键替代tab键的光标移动功能

博客分类：

javascript

JavaScript

在要改变的页面中加入如下代码

Js代码

<script type="text/javascript">
document.onkeydown=function enterToTab() {
if(event.srcElement.type != 'submit' && event.srcElement.type!="image" && event.srcElement.type != 'textarea' && event.keyCode == 13)
event.keyCode = 9;
}
</script>

如果想改变光标移动的顺序，改变表单元素tabindex属性即可

Html代码

<form action="<%=path %>/ih99" name="registerForm" >

<input type="text" name="username" tabindex="1"/>

<input type="text" name="password" tabindex="3"/>

<input type="text" name="checkCode" tabindex="2"/>

</form>

方法1：from 听棠.net

用客户端脚本在页面添加document的onkeydown事件,让页面在接受到回车事件后,进行tab键的功能,即只要把event的keycode由13变为9

vbscript代码:

<script language="vbscript">

sub document_onkeydown

if event.keycode=13 then

event.keycode=9

end if

end sub

</script>

javascript代码如下:

<script language="javascript" for="document" event="onkeydown">



</script>

这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.

因此我对上面的代码进行了一个修改,即判断事件的"源",是否为提交按钮,代码如下:

<script language="javascript" for="document" event="onkeydown">



</script>

注：这个方法真的很好，试验成功的

方法2：

围绕我们要解决的问题，这里我们重点提一下document、form、elements三个对象及onkeypress事件，document
文档对象：是指描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。用法：document （当前窗口）或
<窗口对象>.document （指定窗口）； form 对象：document.forms[] 是一个数组，包含了文档中所有的表单form
；elements对象：为表单元素对象，<表单对象>.elements
是一个数组，包含了该表单所有的对象；onkeypress事件是一个键盘事件，是在用户按下键盘上的键时引发的事件。通过这三大对象再配合onkeypress事件就可以完成现我们的要求；

下面是最终的实现代码清单：
var jumptypearray =new
array("text","password","textarea","checkbox","radio",

"select","select-one","select-multiple","file")//引用页面上可获得焦点元素类型
var
debartypearray =new array("submit","reset","button","checkbox","radio",

"select","select-one","select-multiple","hidden")//引用页面上需排除元素类型
function
instrarray(src,dec)
{//检查给定串是否在指定字符串数组中,如在返回索引号,否返回-1;
for (var i=0 ;
i<dec.length; i++)
{
if (src==dec[i])
{
return i;//定位成功,返回索引号

break;
}
}
return -1; //定位失败,返回-1
}
function
checkcr(evt)
{//回车响应函数
var evt = (evt) ? evt : ((event) ? event : null);

var node = (evt.target) ? evt.target : ((evt.srcelement) ? evt.srcelement :
null);
var frm=document.forms[0]; //指定form名称为页面中的第一个
if ((evt.keycode ==
13) && (instrarray(node.type,jumptypearray)!=-1))

{//判断当前对象是否为可输入对象,对象类型数组:jumptypearray
for (var i = 0 ; i <
frm.elements.length; i++)
{//for begin
if
(frm.elements[i].name==node.name)
{//定位当前对象
if ((i+1)<
frm.elements.length)
{//对象数组索引越位判断
if
(instrarray(frm.elements[i+1].type,jumptypearray)!=-1)
{
//判断当前对象下一个对象是否为可输入组件,对象类型数组:jumptypearray
frm.elements[i+1].focus();//设置焦点

if (instrarray(frm.elements[i+1].type,debartypearray)==-1)
{
//过滤不可选中文本对象,对象类型数组:debartypearray
frm.elements[i+1].select();//选中组件文本内容

}
}
return false;//禁止提交表单内容
break;
}
else
{//提交表单内容

return true;
break;
}
}
}//end for
}
}

document.onkeypress = checkcr;

引用说明：将上面的代码存成文件，如：webenter.js，然后在要实现回车换行的页面中写上：
<script
language="javascript" src="path+webenter.js"></script> 即可。

path：是webenter.js文件所在路径。

注：这个没试，祝好运

给个IE８测试过的页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
document.onkeydown=function enterToTab() {
if(event.srcElement.type != 'submit' && event.srcElement.type!="image" && event.srcElement.type != 'textarea' && event.keyCode == 13)
event.keyCode = 9;
}

function ini() //页面加载时候，第一个单选
{
document.getElementById ("a123").focus();
}

function checktext() //如果　厂商拼音头字母　输入不为空，则清空　厂商类别单选框，选择　厂商拼音字母前的单选框
{
var textbox = document.getElementById ("textbox1");
if(textbox.value != "")
{
document.form.leiyi.checked = false;
document.form.leier.checked = true;
}

}

function twoselone1() //选择第一单选时候，取消第二个单选
{
document.form.leiyi.checked = true;
document.form.leier.checked = false;
}
function twoselone2()　　//选择第二个单选时，取消第一个单选
{
document.form.leiyi.checked = false;
document.form.leier.checked = true;
}
</script>
</head>

<body onload="ini()" >
<form name="form">
<input type="radio" id="a123" name="leiyi" tabindex="1" checked="checked" onclick="twoselone1()"/>厂商类别
<select tabindex="2">
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select><br/>
<input type="radio"　id="a456" name="leier" tabindex="3" onclick="twoselone2()" />厂商拼音头字母<input type="text" id="textbox1" tabindex="4" onblur="checktext()" />
<input type="submit" value="submit" tabindex="5" onclick="javascript:alert('fuck');"/>

</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航