javascript用回车键实现Tab键功能

时间:2009-07-05 18:40:00 

先看下面例子的效果:

<INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
  <INPUT TYPE="text" NAME=""><br>
<script language="javascript" for="document" event="onkeydown">
<!--
  if(event.keyCode==13)
     event.keyCode=9;
-->
</script>

原理:

如何让"回车键"使文本框的焦点一个个下移.其中提了三种方法,最好的一种是这样的:

用客户端脚本在页面添加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>

判断是否为button, 是因为在HTML上会有type="button"

判断是否为submit,是因为HTML上会有type="submit"

判断是否为reset,是因为HTML上的"重置"应该要被执行

判断是否为空,是因为对于HTML上的"<a>链接"也应该被执行,这种情况发生的情况不多,可以使用"tabindex=-1"的方式来取消链接获得焦点.

标签:回车键,JavaScript,tab键,功能
0
投稿

猜你喜欢

  • 开启MySQL的binlog日志的方法步骤

    2024-01-29 07:31:25
  • 对python中各个response的使用说明

    2023-01-20 02:43:16
  • python+matplotlib演示电偶极子实例代码

    2021-07-09 12:52:35
  • PyQt5 QTable插入图片并动态更新的实例

    2022-02-11 03:22:43
  • OpenCV利用python来实现图像的直方图均衡化

    2023-01-22 15:05:36
  • jquery 将disabled的元素置为enabled的三种方法

    2024-04-19 10:19:14
  • 解决Mac node版本升级失败的问题

    2024-05-13 09:34:52
  • 使用selenium自动控制浏览器找不到Chromedriver问题

    2023-02-02 01:32:33
  • Python配置文件解析模块ConfigParser使用实例

    2023-10-19 09:10:19
  • Python爬虫爬取微博热搜保存为 Markdown 文件的源码

    2023-03-03 23:30:29
  • 微信小程序下载工具及调试详解

    2022-10-30 09:06:05
  • Vue实现返回顶部按钮实例代码

    2024-06-05 09:19:50
  • Python实现位图分割的效果

    2021-09-05 11:13:15
  • 用python记录运行pid,并在需要时kill掉它们的实例

    2023-07-31 17:30:18
  • python基于turtle绘制几何图形

    2023-06-22 22:44:43
  • 利用Python编写简易版德州扑克小游戏

    2021-02-03 06:00:59
  • Python实例详解递归算法

    2023-05-17 02:25:06
  • flask-restful使用总结

    2023-02-10 13:24:21
  • Python 文件操作实现代码

    2023-07-12 08:30:59
  • sql语句优化之用EXISTS替代IN、用NOT EXISTS替代NOT IN的语句

    2024-01-22 14:34:06
  • asp之家 网络编程 m.aspxhome.com