使用方向键切换INPUT焦点之左右键补遗

wuyizhong

浏览: 50606 次
性别:
来自: 南京

最近访客更多访客>>

海浪儿

qianfeng0819

wangyang_429

sb12345

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

转载

方向键 INPUT 焦点切换

使用方向鍵切換INPUT焦點之左右鍵補遺

兩年前曾在一個小專案實作過"利用方向鍵切換輸入焦點"，當時留了一個小尾巴: 若直接攔截左、右鍵切換焦點，輸入文字時會喪失用左右鍵移動游標的功能，有違使用者的操作預期，因此實際上線時只保留了上下切換，左右移動部分仍得依賴Tab及Shift-Tab。

最近又有機會處理該專案的功能擴充需求，翻寫到同一支js。為了證明自己並非馬齒徒長，兩年來技術上還是有一丁點小長進，就順手把左右鍵切換焦點的功能也補起來囉~~

聽起來好像很厲害，其實我只是沾了jCaret這個好用jQuery Plugin的光，按下左右鍵時多檢查文字游標，先確認當時游標指向的是輸入位置(而非反白選取了某段文字)，之後再由游標所在位置決定是否要切換焦點。當游標已在最前方時按左鍵或游標已在最後方時按右鍵才需觸發焦點左右移動的邏輯。

程式範例如下，供有興趣的朋友參考:

<!DOCTYPE html>
 
<html>
<head>
    <title>Arrow Key Focus Moving</title>
</head>
<body>
<script type='text/javascript' 
src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js'></script>   
<script type='text/javascript' 
src="http://jcaret.googlecode.com/files/jquery.caret.1.02.min.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").on("keydown", ".cGridInput", function (evt) {
            var origTabIdx = parseInt($(this).attr("tabindex"));
            var tabIndex = origTabIdx;
            var $c = $(this).caret(); //利用jCaret Plugin取得輸入游標資訊
            //確認目前未選取文字段落，游標指向的是文字插入位置
            var noSel = $c.start == $c.end;
            switch (evt.which) {
                case 38: //上
                    tabIndex -= 100;
                    break;
                case 40: //下
                    tabIndex += 100;
                    break;
                case 37: //左(未選取文字，且游標在最前方時才切換)
                    if (noSel && $c.start == 0) tabIndex--;
                    break;
                case 39: //右(未選取文字，且游標在最後方時才切換)
                    if (noSel && $c.start >= this.value.length) tabIndex++;
                    break;
                default:
                    return;
            }
            if (origTabIdx != tabIndex) {
                $(".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>

##来自http://blog.darkthread.net/post-2011-11-23-use-left-right-key-to-movie-focus.aspx黑暗执行绪

分享到：

jqgrid怎么获取当前行的其他列的值 | jquery如何实现过几秒消失的标签提示

2012-02-01 14:11
浏览 1191
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用方向键切换INPUT焦点之左右键补遗

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用方向键切换INPUT焦点之左右键补遗

评论

发表评论

相关推荐

正则表达式 整数

select 循环 attribute id does not accept any expressions

DBeaver （mark一把）

java中获取当前系统时间,日期并格式化输出

android EditText中inputType的属性列表

Struts2单选按钮标签s:radio的使用及其设置默认值

java环境变量配置

colorbox

java caused by:java.sql.SQLException

js获取浏览器信息

jQuery.datePicker日历插件

解决eclipse-helios中Errors running builder JavaScript Validator的问题

jstl对Map,list的操作

java 获取 google地址

struts2中s:select标签的使用

jquery如何实现过几秒消失的标签提示

jquery如何实现过几秒消失的标签提示

jqGrid编辑

Javascript跳转页面和打开新窗口等方法

完整的JSP实现打印预览、打印设置等功能demo

最近访客更多访客>>

正则表达式整数