博客分类:
在要改变的页面中加入如下代码
- <script type="text/javascript">
- document.οnkeydοwn=function enterToTab() {
- if(event.srcElement.type != 'submit' && event.srcElement.type!="image" && event.srcElement.type != 'textarea' && event.keyCode == 13)
- event.keyCode = 9;
- }
- </script>
如果想改变光标移动的顺序,改变表单元素tabindex属性即可
- <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">
<!--
if(event.keycode==13)
event.keycode=9;
-->
</script>
这样的处理方式,可以实现焦点往下移动,但对于按钮也起同样的作用,一般的客户在输入完资料以后,跳到按钮后,最好能直接按"回车"进行数据的提交.因此,对上面的方法要进行一下修改,应该对于"提交"按钮不进行焦点转移.而直接激活提交.
因此我对上面的代码进行了一个修改,即判断事件的"源",是否为提交按钮,代码如下:
<script language="javascript" for="document" event="onkeydown">
<!--
if(event.keycode==13 && event.srcelement.type!=button && event.srcelement.type!=submit && event.srcelement.type!=reset && event.srcelement.type!=textarea && event.srcelement.type!=)
event.keycode=9;
-->
</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文件所在路径。注:这个没试,祝好运
给个IE8测试过的页面代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<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.οnkeydοwn=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 οnlοad="ini()" >
<form name="form"> <input type="radio" id="a123" name="leiyi" tabindex="1" checked="checked" οnclick="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" οnclick="twoselone2()" />厂商拼音头字母<input type="text" id="textbox1" tabindex="4" οnblur="checktext()" /> <input type="submit" value="submit" tabindex="5" οnclick="javascript:alert('fuck');"/></form>
</body></html>