第二，我們還得添加兩個新的類名，實現隱藏不需要的元素（即在腳本能運行時的元素、或腳本不能運行時的自定義組件）。要注意的是在默認情況下，此處的HTML代碼會隱藏自定義組件。

.widget select,
.no-widget .select {
  /* 這個CSS選擇器意思是：
     - 要么body的類名被設為"widget"，此處就要隱藏`

`元素 - 要么body的類名沒有改變，仍是"no-widget"，那么類名為"select"的元素就要被隱藏了 */ position : absolute; left : -5000em; height : 0; overflow : hidden; }

至此，我們只需要一個JavaScript開關來決定腳本是否能運行了。這個開關很簡單：若頁面加載了腳本并運行，就會移除no-widget類并添加widget類，實現對元素和自定義組件可見與否的切換。

window.addEventListener("load", function () {
  document.body.classList.remove("no-widget");
  document.body.classList.add("widget");
});

效果

注意：若你真的想讓你的組件變得通用和可復用，除了作類名的切換，更好的方法是（在腳本能執行時）只添加widget類名隱藏

元素，并在頁面中的每個元素后面指定自定義的組件、動態添加到DOM樹中。

讓工作輕松些

在將要創建的代碼中，我們會使用標準的DOM API來完成工作。然而，盡管瀏覽器對DOM API的支持已經越來越好，但在老舊瀏覽器上仍存在一些問題（特別在很老的IE上）。

若你想避免老舊瀏覽器上的麻煩，有兩種方法可以做到：使用諸如jQuery, $dom, prototype, Dojo, YUI之類的穩定框架；或者補充那些缺失的但你要用的特性（通過條件加載可以很容易做到這點，比如可以使用yepnope庫）。

我們計劃使用的特性如下（從風險最大到最安全排列）：

classList

addEventListener

forEach（不屬于DOM但是現代JavaScript的特性）

querySelector和querySelectorAll

除了上述特性的可用性，在開發之前仍存在一個問題。querySelector()方法返回的是一個NodeList而不是數組。Array對象支持forEach方法、但NodeList不支持。因為NodeList看起來像數組、也因為forEach方法用起來很方便，所以我們可以很簡單地就給NodeList添加forEach支持、讓我們的工作輕松些，就像下面這樣：

NodeList.prototype.forEach = function (callback) {
  Array.prototype.forEach.call(this, callback);
}

我們說這很簡單可不是瞎說的哦。

建立事件回調

前期工作已經做好了，我們現在可以來定義用戶和我們的組件交互時要用到的所有函數了。

/* 這個函數會在取消激活自定義組件時被使用
    需要一個參數：
    select： 類名為`select`且要被取消激活的DOM節點
 */
function deactivateSelect(select) {

  /* 若組件未被激活，則什么都不做 */
  if (!select.classList.contains("active")) return;

  /* 獲取自定義組件的選項列表 */
  var optList = select.querySelector(".optList");

  /* 關閉選項列表 */
  optList.classList.add("hidden");

  /* 取消自定義組件的激活狀態 */
  select.classList.remove("active");
}

/* 該函數用于讓用戶（取消）激活組件
    需要兩個參數：
    select：類名為`select`且要被激活的DOM節點
    selectList：類名為`select`的所有DOM節點的列表
 */
function activeSelect(select, selectList) {

  /* 若組件已經激活，則什么都不做 */
  if (select.classList.contains("active")) return;

  /* 所有自定義組件的激活狀態都得取消，
    因為deactivateSelect函數滿足了作為forEach回調函數的要求，
    所以我們會直接使用它而不是用一個中間的匿名函數
 */
  selectList.forEach(deactivateSelect);

  /* 開啟該組件的激活狀態 */
  select.classList.add("active");
}
 
/* 該函數用于讓用戶打開和關閉選項列表
    需要一個參數：
    select：有一個列表要切換狀態的DOM節點
 */
function toggleOptList(select) {

  /* 選項列表可以從組件那獲得 */
  var optList = select.querySelector(".optList");

  /* 改變列表的類名來展示和隱藏它 */
  optList.classList.toggle("hidden");
}

/* 該函數用于高亮一個選項
    需要兩個參數：
    select：類名為`select`且包含要被高亮選項的DOM節點
    option：類名為`option`且要被高亮的DOM節點
 */
function highlightOption(select, option) {

  /* 獲得自定義select元素的所有可用選項 */
  var optionList = select.querySelectorAll(".option");

  /* 移除所有選項的高亮 */
  optionList.forEach(function (other) {
    other.classList.remove("highlight");
  });

  /* 高亮正確的選項 */
  option.classList.add("highlight");
};

上面就是處理自定義組件的多個狀態所需的所有函數。

接下來，我們把這些函數綁到合適的事件上：

/* 在文檔加載出來后處理下事件綁定 */
window.addEventListener("load", function () {
  var selectList = document.querySelectorAll(".select");

  /* 每個自定義組件都要被初始化 */
  selectList.forEach(function (select) {

    /* 所有的`select`元素也要被初始化 */
    var optionList = select.querySelectorAll(".option");

    /* 用戶把鼠標放到一個選項上時，高亮該選項 */
    optionList.forEach(function (option) {
      option.addEventListener("mouseover", function () {
        /* 注意：在我們的函數調用內，`select`和`option`變量都是局部的 */
        highlightOption(select, option);
      });
    });

    /* 用戶點擊了自定義的select元素 */
    select.addEventListener("click", function (event) {
      /* 注意：在我們的函數調用內，`select`變量是局部的 */
      /* 改變選項列表的可見狀態 */
      toggleOptList(select);
    });

    /* 組件獲得焦點時
    /* 用戶點擊組件或用tab鍵訪問組件時，組件會獲得焦點 */
    select.addEventListener("focus", function (event) {
       /* 注意：在我們的函數調用內，`select`和`selectList`變量都是局部的 */

      /* 激活該組件 */
      activeSelect(select, selectList);
    });

    /* 組件失去焦點時 */
    select.addEventListener("blur", function (event) {
       /* 注意：在我們的函數調用內，`select`變量是局部的 */

      /* 取消激活該組件 */
      deactivateSelect(select);
    });
  });
});

至此，組件已經能根據我們的設計來改變其狀態了，但它的值目前還不會更新，接下來我們就會處理這點。

效果

處理組件的值

現在組件已經能用了，但我們還得加點代碼，根據用戶的輸入更新它的值、并讓其能隨著表單數據一起發送它的值。

要做到這點，最簡單的方式就是在私底下用一個原生組件。這樣一來，自定義組件就會跟蹤瀏覽器提供的內置控件的值，并和平時一樣在表單提交時發送它的值。在瀏覽器已經為我們做好這一切時，沒有必要來重新發明輪子了。

如前所示，出于可訪問性的原因，我們已經用了一個原生的select組件來作為回退；同步這個組件的值和自定義組件的值是很容易的：

// 該函數用于更新展示的值，并和原生組件作同步
// 需要兩個參數：
// select：類名為`select`且值要更新的DOM節點
// index：選定的值的索引
function updateValue(select, index) {
  // 我們得為給定的自定義組件獲取原生組件
  // 本例中，原生組件是自定義組件的兄弟節點
  var nativeWidget = select.previousElementSibling;

  // 獲得自定義組件的值容器
  var value = select.querySelector(".value");

  // 獲得完整的選項列表
  var optionList = select.querySelectorAll(".option");

  // 設置選中索引為我們選擇的選項的索引
  nativeWidget.selectedIndex = index;

  // 更新對應的值容器
  value.innerHTML = optionList[index].innerHTML;

  // 高亮自定義組件中關聯的選項
  highlightOption(select, optionList[index]);
};

// 該函數返回原生組件當前選中的索引
// 需要一個參數：
// select：類名為`select`且和原生組件關聯的DOM節點
function getIndex(select) {
  // 我們得為給定的自定義組件獲取原生組件
  // 本例中，原生組件是自定義組件的兄弟節點
  var nativeWidget = select.previousElementSibling;

  return nativeWidget.selectedIndex;
};

我們可以用上面這兩個函數來綁定原生組件和自定義組件：

// 在文檔加載出來后處理下事件綁定
window.addEventListener("load", function () {
  var selectList = document.querySelectorAll(".select");

  // 每個自定義組件都要被初始化
  selectList.forEach(function (select) {
    var optionList = select.querySelectorAll(".option"),
        selectedIndex = getIndex(select);

    // 讓自定義組件能聚焦
    select.tabIndex = 0;

    // 讓原生組件不可聚焦
    select.previousElementSibling.tabIndex = -1;

    // 確保默認選擇的值被正確展示
    updateValue(select, selectedIndex);

    // 用戶點擊選項時，更新對應的值
    optionList.forEach(function (option, index) {
      option.addEventListener("click", function (event) {
        updateValue(select, index);
      });
    });

    // 用戶在聚焦的組件上按鍵盤時，更新對應的值
    select.addEventListener("keyup", function (event) {
      var length = optionList.length,
          index  = getIndex(select);

      // 當用戶按下箭頭時，跳到后一選項
      if (event.keyCode === 40 && index < length - 1) { index++; }

      // 當用戶按上箭頭時，跳到前一選項
      if (event.keyCode === 38 && index > 0) { index--; }

      updateValue(select, index);
    });
  });
});

上面的代碼里，要注意tabIndex屬性的使用。該屬性用來確保原生組件不會獲得焦點，并確保自定義組件能在用戶用鍵盤或鼠標訪問時獲得焦點。

通過上面的工作，我們已經完成任務了！下面就是結果：

效果

等等，我們真的完成了嗎？

讓組件變得無障礙

我們已經構建了一個可以運行的組件，雖然距離得到一個具有完整特性的選擇框還很遠，但它運行得還不錯。然而，我們之前所做的只是在處理DOM而已，這個組件并不是真正語義化的，而且雖然它看起來像個選擇框，但在瀏覽器的角度它卻并不是這樣，因此無障礙技術也不會認為它是個選擇框。簡而言之，它就是個無障礙性很差的漂亮選擇框！

幸運的是，我們有個解決方案叫ARIA。ARIA表示“無障礙的富Internet應用”，它是個W3C規范，用來讓web應用和自定義組件變得無障礙。基本上這個規范就是一系列拓展了HTML的特性，用這些特性，我們可以更好地描述角色、狀態和屬性，讓我們剛才設計的元素變得像其盡力模仿的原生元素一樣。使用這些特性很簡單，下面我們來試試。

role特性

ARIA使用的關鍵特性是role。該特性會接收一個定義了元素用途的值，每個值都代表了元素的特點和行為。在本例中，我們會使用一個listbox作為role值，這個值是個“復合的role”，指定的元素可以包含多個特定role的子元素（本例中，至少有一個元素role值為option）。

值得注意的是，ARIA定義的role默認會自動用于標準的HTML標簽中。比如說，

元素對應grid，

元素對應list。因為我們的組件使用了
元素，所以得確保組件的listbox role能覆蓋掉
元素的list值。為此，可以使用presentation這個role值，該值用來指明一個沒有特殊含義的元素，而且該元素只用來展示信息而已。這里我們會給
應用presentation值。

要使用listbox這個role值，得像下面一樣修改HTML：

  Cherry
  
  

    
    
Cherry
    
Lemon
    
Banana
    
Strawberry
    
Apple
  

注意：如果你想兼容那些不支持CSS特性選擇器的老舊瀏覽器，同時使用role特性和class特性這種做法是必須的。

aria-selected特性

僅使用role特性是不夠的，ARIA本身也提供了很多許多狀態和屬性特性。對這些特性用得越多和越恰當，網頁就越能被無障礙技術所理解。在我們的例子中，只會用到一個特性：aria-selected。

aria-selected特性用于標記當前選中的選項，這樣無障礙技術就能提示用戶當前選中項是什么。我們會在JavaScript中動態地使用它，在用戶選中一個選項時能標記該選中項。為此，得修改下updateValue()函數：

function updateValue(select, index) {
  var nativeWidget = select.previousElementSibling;
  var value = select.querySelector(".value");
  var optionList = select.querySelectorAll(".option");

  // 確保所有的選項未被選中
  optionList.forEach(function (other) {
    other.setAttribute("aria-selected", "false");
  });

  // 確保選擇的那個選項被選中
  optionList[index].setAttribute("aria-selected", "true");

  nativeWidget.selectedIndex = index;
  value.innerHTML = optionList[index].innerHTML;
  highlightOption(select, optionList[index]);
};

上述修改的最終效果如下（訪問該組件時使用無障礙技術，譬如NVDA或VoiceOver，會有更好的體驗）：

效果

結論

至此我們已經了解了創建定制表單組件的所有基本知識，但如你所見，這么做并不簡單，如果使用第三方庫的話會比自己從頭寫起更好、更簡單（當然除非你是想構建這樣一個庫）。

下面是你在自己開發之前應該參考下的庫：

jQuery UI

msDropDown

Nice Forms

更多的庫

若你想更進一步使用本例，為讓其中的代碼變得通用和可復用，還要對代碼做一些改進。這個練習你可以自己嘗試下，這里有兩個提示：首先，所有函數的第一個參數都相同，這就意味著這些函數需要有同一個執行上下文，使用一個對象來共享執行上下文是很明智的。此外，代碼還得保證兼容，即代碼最好能在兼容不同Web標準的多種瀏覽器下運行。

云服務器 GPU云服務器 表單組件 java表單框的組件 表單創建 用jsp創建表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112165.html

• 上一篇：CSS處理文本過長或超出部分（解說一）
• 下一篇：推薦一款右鍵菜單

相關文章

• 【譯】HTML表單高級樣式

  摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

  caikeal 2019-08-29 10:59 評論0 收藏0

• 【譯】HTML表單高級樣式

  摘要：示例多選框和單選框給多選框和單選框添加樣式是很讓人凌亂的。通向漂亮表單之路一些有用的庫和拓展工具盡管在復選框和單選框上的表現力已經夠用了，但離其支持高級表單組件仍然遙遙無期。其表單部分挺有用的。 系列文章說明 原文 在本文中，我們將了解如何在HTML表單上使用CSS，為那些難于自定義的表單組件加以樣式。如前文所述，文本框和按鈕很適合使用CSS，而現在我們得來探索HTML表單樣式的那...

  Jacendfeng 2019-08-01 15:29 評論0 收藏0

• 【譯】怎樣創建定制表單組件

  摘要：若你想在諸如元素的組件上應用高級樣式或者想定制組件的行為，你就只能選擇創建自己的表單組件。我們將通過本文學習如何構建一個表單組件。 系列文章說明 原文 在許多情況下，[可用的HTML表單組件]()是不夠的。若你想在諸如元素的組件上[應用高級樣式]()、或者想定制組件的行為，你就只能選擇創建自己的表單組件。 我們將通過本文學習如何構建一個表單組件。為達到目的，我們選擇重構元素作為例子...

  AnthonyHan 2019-08-21 15:55 評論0 收藏0

• 【譯】怎樣創建定制表單組件

  摘要：若你想在諸如元素的組件上應用高級樣式或者想定制組件的行為，你就只能選擇創建自己的表單組件。我們將通過本文學習如何構建一個表單組件。 系列文章說明 原文 在許多情況下，[可用的HTML表單組件]()是不夠的。若你想在諸如元素的組件上[應用高級樣式]()、或者想定制組件的行為，你就只能選擇創建自己的表單組件。 我們將通過本文學習如何構建一個表單組件。為達到目的，我們選擇重構元素作為例子...

  wanghui 2019-08-01 17:02 評論0 收藏0

• 【譯】怎么樣構建HTML表單

  摘要：當你構建表單時，可以試著聽一下屏幕閱讀器如何讀取它，若聽起來很奇怪，那就有必要改進你的表單結構了。該規則必須在表單頭部以保證在用戶找到必填元素之前，屏幕閱讀器等無障礙設備能將其展示或讀給用戶。 系列文章說明 原文 在建立HTML表單時，最重要的一件事就是如何用正確的方式構建它。而之所以重要，原因有二：一是保證表單能被正確使用、二是這能保證你的表單是無障礙的（可以被能力不同的人使用）...

  hover_lew 2019-08-02 15:55 評論0 收藏0

發表評論

登陸后可評論

0條評論

William_Sang
男|高級講師
我要關注 我要私信
TA的文章
閱讀更多
• openpose

  閱讀 3091·2023-04-25 15:44

• 再次認識 vertical-align

  閱讀 1875·2019-08-30 13:11

• 自定義占位文本(placeholder)的樣式

  閱讀 2830·2019-08-30 11:11

• 小程序rich-text對富文本支持方案

  閱讀 3003·2019-08-29 17:21

• 360前端星學習筆記-深入css(2)

  閱讀 1306·2019-08-29 15:38

• 【譯】怎樣創建定制表單組件

  閱讀 898·2019-08-29 12:49

• 「CSS3 」3D效果 & 透視

  閱讀 1793·2019-08-28 18:19

• 重讀《學習JavaScript數據結構與算法-第三版》- 第3章 數組（二）

  閱讀 3222·2019-08-26 14:01
最新活動


閱讀需要支付1元查看
支付并查看

<