使用方向键切换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> ??