`
wuyizhong
  • 浏览: 50709 次
  • 性别: Icon_minigender_2
  • 来自: 南京
社区版块
存档分类
最新评论

使用方向键切换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黑暗执行绪

 

分享到:
评论

相关推荐

    DLT6452007第2号补遗

    关于第一批送样检测的两种智能电能表继续送样公告第2号补遗(2010-01-18) 为规范送检电能表通信规约及安全认证的相关内容,特作出如下规范。送检电能表需按照(略)

    1376.2规约6号补遗

    国网计量中心发布的用电信息采集远程及本地通信单元全性能试验检测公告第6号补遗,涉及了用电信息采集系统的通信单元技术规范、通信协议标准和测试方法等多个方面。这些内容详细规定了宽带载波通信单元和微功率无线...

    VC补遗之Profile篇.docx

    VC 补遗之 Profile 篇 Profile 的作用 ---------------- Profile 是一个功能强大且实用的工具,帮助开发者分析并发现程序运行的瓶颈,找到耗时所在,同时也能帮助开发者发现不会被执行的代码。从而最终实现程序的...

    Symantec Backup Exec 2012__SP2 管理指南补遗-14.pdf

    Symantec Backup Exec 2012 SP2 管理指南补遗是一份详细的管理指南,旨在帮助用户更好地使用 Symantec Backup Exec 2012 SP2 软件。该指南包含了对 Symantec Backup Exec 2012 管理指南的增补和修订,涵盖了软件的...

    论文研究-基于GPS实时数据的在线过滤与补遗研究.pdf

    为提高GPS数据的有效性与可靠性,使之为实现实时交通流量预测与交通诱导服务,首先基于GPS历史数据,以变异系数极小化为优化目标进行GPS数据过滤模型的优选,并对实时数据缺损提出两种补遗算法;然后给出基于动态GPS...

    清除MY123重点补遗

    【清除MY123重点补遗】主要涉及的是如何处理MY123这一类的恶意程序,这是一种典型的明星级流氓程序,对用户的计算机系统安全构成威胁。MY123不仅难以卸载,还具备自我复制和恢复的能力,使得常规的删除方法往往无效...

    电科院资料补遗文件

    ### 电科院资料补遗文件关键知识点解析 #### 一、背景介绍 - **文件来源**:国网计量中心发布的一份关于电能表全性能试验检测的补遗公告,时间为2014年。 - **主要内容**:针对最新的国家标准和技术要求,对智能...

    一个完整的安装程序实例之补遗_20081022_—艾泽拉斯之海洋女神出品

    本文档是对《一个完整的安装程序实例—艾泽拉斯之海洋女神出品》的补充说明,主要针对安装程序完成后遇到的应用程序运行时的小问题进行了解决方案的阐述。这些解决方案主要是通过在安装过程中传递参数和设置环境变量...

    基于GPS实时数据的在线过滤与补遗研究.pdf

    《基于GPS实时数据的在线过滤与补遗研究》是一篇探讨如何提高GPS数据质量和可靠性的学术论文。文章主要关注在智能运输系统(ITS)中,如何利用GPS数据进行实时交通流量预测和交通诱导服务。作者包括米葛晓锋、曹斌、...

    专业技能字典市场研究补遗.doc

    专业技能字典市场研究补遗.doc

    珍珠囊补遗药性赋.doc

    《珍珠囊补遗药性赋》是一份元代医学文献,由李东垣撰写,主要阐述了中药的药性和用途。这份文档分为三个卷,详细介绍了各类药物的性质、功效和适用症,对于理解中药的特性及其在治疗疾病中的作用具有重要价值。 ...

    二实用计算机软硬件知识补遗PPT课件.ppt

    二实用计算机软硬件知识补遗PPT课件.ppt

    TCP/IP学习笔记补遗

    《TCP/IP学习笔记补遗》是对TCP/IP协议族的深入理解和实践后的补充材料,旨在帮助读者更好地理解这个复杂的通信协议体系。TCP/IP是互联网的基础,它由四个主要层次构成:应用层、传输层、网络层和数据链路层。下面...

    银行业务与信息化系统分析补遗可用.pdf

    银行业务与信息化系统分析补遗可用 本文对银行业务与信息化系统进行了全面的分析和补遗,涵盖了银行业务发展动态、银行IT系统、银行业务系统、管理信息系统等方面的知识点。 银行业务发展动态 银行业务发展动态是...

Global site tag (gtag.js) - Google Analytics