jQuery 在輸入欄位裡按下Enter鍵也有按Tab鍵跳下一欄位的效果

因為開發的專案是一個有關會計系統的網站系統，所以頁面上的輸入欄位(TextBox)會相當的多，

而使用者輸入數字後通常不會再去抽出左手去按下Tab鍵讓輸入框的focus移到下一個，

通常使用者都是左手控制傳票或是指向要輸入數字的地方，而右手就是在鍵盤右方的數字鍵那邊一直輸入，

當輸入完一個欄位後就是直接按下數字鍵的Enter鍵，讓輸入框的focus移到下一個。

 

其實這一點都不是很難，而且網路上也有人針對此功能做出了相關的jQuery Plugin套件，

這裡就做個介紹與使用的方式。

tabIndex

一開始我們先認識一下在HTML中的一個基本的屬性「tabIndex」，

W3C - tabindex 的說明

w3schools.com - HTMLElement tabIndex Property

w3schools.com.cn - HTML DOM tabIndex 屬性

 

為什麼要特別介紹說明呢？

這是因為我一直以為這是一個很基本而且也是網頁設計從業人員應該要認得的屬性，

它的定義就是「tabIndex 屬性可設置或返回單選按鈕的tab 鍵控制次序。」

但是在專案開發的時候，專案的另一位成員在處理這個Enter鍵有Tab鍵效果的功能時，

卻是需要額外在TextBox中去增加一個自定義的屬性 EnterToNext ……著實有點畫蛇添足，

以下是不好的處理方式，千萬不要用：

//==================== Enter事件取代Tab ===================
//改成正確的外掛寫法
(function($) {
    $.fn.EnterToNext = function() {
        $(this).keydown(function(event) {
            if (event.keyCode == 13) {
                try {
                    $(String.format('[EnterToNext={0}]', parseInt($(this).attr("EnterToNext")) + 1)).select();
                    return false;
                }
                catch (ex) {
                }
            }
        });
    }
})(jQuery);
//==================== Enter事件取代Tab ===================

上面的程式中有蠻多的問題存在，雖然說基本的功能有達到，但是event.keyCode的使用就隱藏了在非IE瀏覽器無法運作的可能性。

 

我所使用的程式是來自以下的網站：

Lysender's Daily Log Book - Enter to tab navigation jQuery plugin

而我對原來的程式有做了一點小修改，如下所示：

/*

* Copyright (c) 2007 Betha Sidik (bethasidik at gmail dot com)

* Licensed under the MIT License:

* http://www.opensource.org/licenses/mit-license.php

*

* This plugin developed based on jquery-numeric.js developed by Sam Collett (http://www.texotela.co.uk)

*/

/*

* Change the behaviour of enter key pressed in web based to be tab key

* So if this plugin used, a enter key will be a tab key

* User must explicitly give a tabindex in element such as text or select

* this version will assumed one form in a page

* applied to element text and select

*

*/

/*

* I modified the plugin to work for my need

* This will work even if the next tabindex is non-existent, or disabled so

* it will find the very next element on the tabindex series until the maximum tabindex

* which must be defined manually.

*

* ALL CREDITS GOES TO THE ORIGINAL AUTHOR

*/

jQuery.fn.enter2tab = function()

{

    this.keypress(function(e)

    {

        // get key pressed (charCode from Mozilla/Firefox and Opera / keyCode in IE)

        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

        var tmp = null;

        var maxTabIndex = 9999;

        // get tabindex from which element keypressed

        var nTabIndex = this.tabIndex + 1;

        // get element type (text or select)

        var myNode = this.nodeName.toLowerCase();

        // allow enter/return key (only when in an input box or select)

        if (nTabIndex > 0

            && key == 13

            && nTabIndex <= maxTabIndex

            && ((myNode == "textarea") || (myNode == "input") || (myNode == "select") || (myNode == "a")))

        {

            for (var x = 0; x < 3; x++)

            {

                tmp = $("a[tabIndex='" + nTabIndex + "'],textarea[tabIndex='" + nTabIndex + "'],select[tabIndex='" + nTabIndex + "'],input[tabIndex='" + nTabIndex + "']").get(0);

                if (typeof tmp != "undefined" && !$(tmp).attr("disabled"))

                {

                    $(tmp).focus();

                    return false;

                    //break;

                }

                else

                {

                    //如果要循環的話，就解開以下的封印

                    //var first = $("a[tabIndex='1'],textarea[tabIndex='1'],select[tabIndex='1'],input[tabIndex='1']").get(0);

                    //$(first).focus();

                    return false;

                }

            }

            return false;

        }

        else if (key == 13)

        {

            return false;

        }

    })

    return this;

}

你可以將此段程式碼另存為jquery.enter2tab.js，再專案中去做include。

 

而使用的方式如下：

  <script type="text/javascript">
  <!--
  $(document).ready(function()
  {
    Page_Init();
  });
  function Page_Init()
  {
    $('#testContent').empty();
      
    for(var i=1; i<=10; i++)
    {
      $('#testContent').append("textbox "+ i +" : <input type=\"text\" id=\"text_box_"+ i +"\" tabIndex=\""+ i +"\" /><br/>");
    }
    
    $('#testContent :input[type=text][id^=text_box_]').enter2tab();
  }
  -->
  </script>

實際的功能操作範例：

 

延伸閱讀：

Lysender's Daily Log Book - Enter to tab navigation jQuery plugin

In 91 - [Tips]網頁上按 Enter 鍵，模擬 Tab 鍵效果

 

以上