jQuery-利用上下左右键移动输入焦点
来源:互联网 发布:windows组管理策略 编辑:程序博客网 时间:2024/05/18 20:35
转自:http://blog.darkthread.net/post-2009-10-06-jquery-arrow-keys-focus-moving.aspx
今天同事詢問如何在網頁實作以上下左右鍵移動輸入焦點的效果,我寫了一個jQuery解法示範,順便貼出來跟大家分享。
範例中有4x4共16個矩陣狀排列的<input>,我先用each("tr") each("td")為每個<input>標上tabindex。每列的tabindex相差100,如此加減100就可以跳到上下列的同一欄。統一為<input>加上cGridInput Class Name,方便後續以selector一次選取。用live鎖定.cGridInput keydown事件,分別配合上、下、左、右算出移動目標元素的tabindex,接著用.cGridInput[tabindex=?]找到元素觸發focus()取得焦點,大功告成。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arrow Key Focus Moving</title>
</head>
<body>
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script type="text/javascript">
$(function() {
var baseIndex = 100;
$("#tblGrid")
.find("tr").each(function(r) {
$(this).find("td").each(function(c) {
$(this).find("input")
.attr("tabindex", r * 100 + c + baseIndex)
.addClass("cGridInput");
});
});
$("#tblGrid .cGridInput").live("keydown", function(evt) {
var tabIndex = parseInt($(this).attr("tabindex"));
switch (evt.which) {
case 38: //上
tabIndex -= 100;
break;
case 40: //下
tabIndex += 100;
break;
case 37: //左(會導致輸入時無法使用左右移)
tabIndex--;
break;
case 39: //右(會導致輸入時無法使用左右移)
tabIndex++;
break;
default:
return;
}
if (tabIndex > 0) {
$(".cGridInput[tabindex=" + tabIndex + "]").focus();
return false;
}
return true;
});
});
</script>
<table id="tblGrid">
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
<tr><td><input /></td><td><input /></td><td><input /></td><td><input /></td></tr>
</table>
</body>
</html>
- jQuery-利用上下左右键移动输入焦点
- JS上下左右键在GridView 中移动焦点
- js 上下左右键控制焦点
- Android 上下左右键更换焦点
- 利用jquery实现在html的表格中使用上下左右键切换单元格,同时只限制单元格输入数字
- vim 输入状态 上下左右键 失灵
- JS控制文本框内键盘上下左右键的焦点
- ArcEngine中使用上下左右键移动地图
- 上下左右键控制光标在文本框内移动
- 上下左右键控制ultraGrid单元格数据的移动
- java中image显示图片,随上下左右键移动
- ArcEngine中使用上下左右键移动地图
- EXCEL上下左右键
- PB中利用左右键或回车键进行焦点转移
- C#接受上下左右键
- ArcEngine中使用上下左右键移动地图功能的实现
- java事件机制之通过上下左右键来控制小球为位置的移动演示
- 利用JS来控制键盘的上下左右键(示例代码)
- 关于source中的TARGETLIBS和SOURCELIBS的区别
- Gtk中调用Mplayer
- Activity 详解
- Linux基础编程-文件操作open,lseek,read,write,close
- turning point
- jQuery-利用上下左右键移动输入焦点
- Linux系统新手学习的11点建议
- 博客收藏
- Linux上制作可执行的共享库示例
- 关于ExtJS TextField 下边界会消失的bug
- vim——打开多个文件、同时显示多个文件、在文件之间切换
- 启动workflow错误----FMC31050E解决
- 修改发布到weblogic服务器的项目访问名称
- android 绘图