`
陈谏辉
  • 浏览: 49276 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

js键盘上下左右(方向键)事件

阅读更多

<script language="javascript">
function keygo(evt,cols){
var cols=cols//列数,手动设置
var elobj=myform.elements.length;
//key=window.event.keyCode;不兼容firefox

key = window .event?evt.keyCode:evt.which;
if (key==38){//↑
CurTabIndex=event.srcElement.tabIndex-cols
for (n=0;n<myform.elements.length;n++){
if (myform.elements[n].tabIndex==CurTabIndex){
myform.elements[n].select();
return true;
}
}
}
if (key==40){//↓
CurTabIndex=event.srcElement.tabIndex+cols
for (n=0;n<myform.elements.length;n++){
if (myform.elements[n].tabIndex==CurTabIndex){
myform.elements[n].select();
return true;
}
}
}
if (key==37){//←
CurTabIndex=event.srcElement.tabIndex-1
for (n=0;n<myform.elements.length;n++){
if (myform.elements[n].tabIndex==CurTabIndex){
myform.elements[n].select();
return true;
}
}
}
if (key==39){//→
CurTabIndex=event.srcElement.tabIndex+1
for (n=0;n<myform.elements.length;n++){
if (myform.elements[n].tabIndex==CurTabIndex){
//myform.elements[n].focus();
myform.elements[n].select();
return true;
}
}
}
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<form name="myform" id="myform" method="post" onKeyUp="return keygo(event,5)">
<tr>
<td><input name="textfield1" type="text" id="textfield" value="有文字也会跳过" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" value="1netmedia.cn" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input name="textfield" type="text" id="textfield" value="有文字也会跳过" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" value="1NetMedia Studio" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" value="有文字也会跳过" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input name="textfield" type="text" id="textfield" value="1netmedia.net" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" value="『一网传媒』" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
<tr>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" value="技术交流" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
<td><input type="text" name="textfield" id="textfield" /></td>
</tr>
</form>
</table>

<script type="text/javascript">
myform.textfield1.focus();
for (n=0;n<myform.elements.length;n++){
myform.elements[n].tabIndex=n;
}

分享到:
评论

相关推荐

    js 实现 用键盘上下键实现表格行的上下选择

    js 实现 用键盘上下键实现表格行的上下选择! 值得下载看看!资源免费,大家分享!!

    方向键盘控制table内的input标签焦点

    在这个场景中,我们需要监听键盘事件,特别是上、下、左、右四个方向键的按下。当用户按下这些键时,我们需要找到当前焦点的输入框,并根据箭头键的方向改变焦点到相邻的输入框。 实现这个功能的基本步骤如下: 1....

    js键盘箭头控制上下选中标签元素

    键盘上的箭头键有四个方向:上、下、左、右,对应的键码分别为38、40、37、39。我们可以检查`event.keyCode`来判断: ```javascript if (event.keyCode === 38 || event.keyCode === 40) { // 处理上下箭头键 } ...

    js获取上下左右

    ### JavaScript 获取键盘上下左右键事件详解 在Web开发过程中,我们经常会遇到需要处理用户键盘输入的情况,特别是游戏或交互式应用开发中。本篇文章将详细解释如何使用JavaScript来捕获键盘上的上下左右键事件,并...

    js键盘上下左右键怎么触发function(实例讲解)

    在JavaScript中,监听键盘事件是实现用户通过键盘上下左右键触发特定函数的关键。在这个实例讲解中,我们将深入探讨如何利用JavaScript来捕捉键盘按键,并根据不同的按键执行不同的功能。 首先,我们要了解...

    jquery 搜索 键盘选择 li 键盘事件 鼠标事件

    以上代码片段展示了如何利用 jQuery 实现一个简单的搜索建议功能,其中包括了对键盘事件(主要是上下方向键)的监听和处理,以及对鼠标事件的处理(如悬停和点击)。通过这些技术的应用,可以有效地提高用户的搜索...

    支持按键盘方向键翻页跳转的代码.rar

    这个“支持按键盘方向键翻页跳转的代码”就是一个典型的例子,它利用JavaScript(简称JS)实现了用户可以使用键盘的左右方向键(← →)或PageUp、PageDown键来翻页的功能。这样的功能对于阅读长篇文章或者浏览多...

    js实现键盘上下左右键选择文字并显示在文本框的方法

    本文实例讲述了js实现键盘上下左右键选择文字并显示在文本框的方法。分享给大家供大家参考。具体实现方法如下: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    js 上下左右键控制焦点(示例代码)

    4. 控制焦点移动的函数逻辑:在setpostion函数中,根据触发方向键事件的类型(上下左右),对变量x和y进行操作,来改变焦点的当前位置。这里通过判断条件来实现边界限制,使得焦点不能移出预定的区域。 5. 实现焦点...

    js实现上下左右键盘控制div移动

    标签“js上下键盘控制div移动”、“js键盘控制div移动”、“js上下左右键盘控制”进一步强调了这个话题的核心,即利用JavaScript处理键盘事件,并据此改变div的CSS属性(如`top`和`left`)来实现移动效果。...

    鼠标选中按键,方向键控制选中按键移动

    这涉及到键盘事件的监听和处理,比如在程序中添加对上、下、左、右四个方向键的监听,当用户按下这些键时,根据按键的方向改变选中控件的位置。实现这一功能可能需要编程语言中的事件循环、坐标系统以及控件移动的...

    javascript键盘上下键的操作(选择)

    ### JavaScript键盘上下键的操作(选择) #### 知识点概览 本文将详细介绍如何使用JavaScript来监听键盘事件,并根据用户的上下箭头按键操作来选择表格中的行或改变其背景色。我们将通过两个示例代码来具体说明这一...

    jQuery 上下 左右 四方向 可控滚动 特效

    在本文中,我们将深入探讨如何使用jQuery实现上下左右四方向可控的滚动特效。这个特效能够为网站或应用程序添加动态和互动性,提升用户体验。我们将会分析实现这种效果的关键技术和步骤,以及如何根据需要进行定制。...

    2048军旗版游戏,基于html5+js制作。键盘上下左右按键,开始游戏

    JavaScript的事件监听机制使得游戏能够实时响应用户的操作,如监听键盘的keyup事件,根据用户按下的方向键进行相应的棋子移动。此外,利用DOM(文档对象模型)操作,JavaScript可以改变HTML元素的属性,如更新得分,...

    鼠标左右拖动,键盘左右移动,点击箭头左右移动内容

    总之,"鼠标左右拖动,键盘左右移动,点击箭头左右移动内容"是提高网页交互性和用户体验的重要手段,涉及到的技术包括JavaScript事件处理、DOM操作以及可能的前端库或框架的使用。通过这些技术,我们可以创建出更加...

    html5 上下左右移动的小人

    在这个"html5 上下左右移动的小人"项目中,我们探讨的是如何使用HTML5的Canvas API来实现一个简单的游戏角色控制机制,玩家可以通过键盘上的方向键来操纵小人的移动。 Canvas是HTML5中的一个核心元素,它提供了一个...

    easyui datagrid实现实现上下左右和回车切换单元格

    // 其他方向键和回车键的处理逻辑 // ... }); }); } }); ``` ### 四、完整示例 结合上述 HTML 和 JavaScript 代码,可以构建一个完整的示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;DataGrid Keyboard ...

    仿百度联想词下拉列表,键盘上下键选值

    其次,为了实现键盘上下键选值的功能,我们需要利用JavaScript或者Vue、React等前端框架来处理键盘事件。当用户按下键盘的上或下箭头键时,会触发特定的事件,此时代码会更新选中的下拉列表项。这涉及到DOM操作,...

    JS绑定上下键盘 操作表格数据行选中

    适合任何绑定的后台数据源, 完整版,亲测可用,无bug,本人使用的是jquerygrid表格绑定。

    键盘上下键移动选择table表格行的js代码

    为了实现使用键盘上下键移动选择表格行的功能,我们需要编写JavaScript代码来绑定键盘事件,并在事件触发时更新表格行的选择状态。接下来,我将详细说明涉及的关键知识点和技术细节。 1. **HTML表格(table)的结构...

Global site tag (gtag.js) - Google Analytics