在表单中,如何使用Enter来替代Tab?

kkk2kkk 2004-08-27 11:59:02

我想建立这样一种效果:

在某个表单中有几个文本输入框和选择项,访问者在输入完一个文本框之后按回车就自动聚焦到下一个文本框或选择项(这个跳转顺序需要事先自定义),在使用Shift+Enter组合键时就能回退到上一个文本框或选择项
...全文
161 10 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
vikingleo 2004-09-16
  • 打赏
  • 举报
回复
看看
kkk2kkk 2004-08-27
  • 打赏
  • 举报
回复

meizz(梅花雪) 的方法不错,测试过了,Enter键的效果实现了,但Shift+Enter组合键应该如何截取呢?

另外,我发现我的设计有一个漏洞:就是textarea区域内无法用Enter键来跳转到其他地方,因为textarea区域内本身就用Enter键来换行的,大家有什么好的解决思路吗?


谢谢meizz(梅花雪)、stefli((桂电)),我下午再测试一下,晚上结贴。
stefli 2004-08-27
  • 打赏
  • 举报
回复
那就不要使用tab方式,
直接
obj.focus() ;
meizz 2004-08-27
  • 打赏
  • 举报
回复
function enter2tab() //网页里按回车时焦点的转移
{
var e = document.activeElement;
var b = (e.tagName == "INPUT"
&& window.event.keyCode == 13
&& ( e.type == "text"
|| e.type == "password"
|| e.type == "checkbox"
|| e.type == "radio")
|| e.tagName=="SELECT");

var a = document.forms[0].elements, n=-1;
for(var i=0; i<a.length; i++)
{
if(a[i]==e) n=i;
if(n>-1 && b && n+1<a.length)
{
if(!a[n+1].disabled)
{
a[n+1].focus();
window.event.keyCode = 0;
window.event.returnValue= false;
return;
}
n=i;
}
}
}
kkk2kkk 2004-08-27
  • 打赏
  • 举报
回复
因为文本框和选择项之间会有一些链接,所以正常按Tab时是在所有项目之间轮流聚焦的,但我只想在文本框和选择项之间切换,而忽略其中夹杂的普通链接,所以必须要定义跳转顺序,不知道我这么解释,大家是否能够明白我的意图?
kkk2kkk 2004-08-27
  • 打赏
  • 举报
回复
我觉得实现方法应该有四个要点:
一、定义表单中文本框和选择项的跳转顺序;
二、拦截Enter键的输入;
三、拦截Shift(左、右)+Enter键的输入;
四、跳转部分:如果访问者按了Enter键或者Shift+Enter键,就根据按键时所在的文本框或选择项的自定义序号进行相应跳转。
meizz 2004-08-27
  • 打赏
  • 举报
回复
<input onkeydown="if(event.keyCode==13)event.keyCode=9">ENTER键可以让光标移到下一个输入框<br>
<input onkeydown="if(event.keyCode==13)event.keyCode=9"><br>
<input onkeydown="if(event.keyCode==13)event.keyCode=9"><br>
<input onkeydown="if(event.keyCode==13)event.keyCode=9"><br>
kkk2kkk 2004-08-27
  • 打赏
  • 举报
回复

还有一点不明白:

if(!a[n+1].disabled)中的disabled是什么意思?
kkk2kkk 2004-08-27
  • 打赏
  • 举报
回复
明白了,谢谢大家,结贴!
BubbleInDiamond 2004-08-27
  • 打赏
  • 举报
回复
如果是Netscape浏览器
触发的函数上加行参e,然后e.which代替event.keyCode

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧