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

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

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

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

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

效果

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

元素，并在頁面中的每個(gè)元素后面指定自定義的組件、動(dòng)態(tài)添加到DOM樹中。

讓工作輕松些

在將要?jiǎng)?chuàng)建的代碼中，我們會(huì)使用標(biāo)準(zhǔn)的DOM API來完成工作。然而，盡管瀏覽器對DOM API的支持已經(jīng)越來越好，但在老舊瀏覽器上仍存在一些問題（特別在很老的IE上）。

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

我們計(jì)劃使用的特性如下（從風(fēng)險(xiǎn)最大到最安全排列）：

classList

addEventListener

forEach（不屬于DOM但是現(xiàn)代JavaScript的特性）

querySelector和querySelectorAll

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

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

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

建立事件回調(diào)

前期工作已經(jīng)做好了，我們現(xiàn)在可以來定義用戶和我們的組件交互時(shí)要用到的所有函數(shù)了。

/* 這個(gè)函數(shù)會(huì)在取消激活自定義組件時(shí)被使用
    需要一個(gè)參數(shù)：
    select： 類名為`select`且要被取消激活的DOM節(jié)點(diǎn)
 */
function deactivateSelect(select) {

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

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

  /* 關(guān)閉選項(xiàng)列表 */
  optList.classList.add("hidden");

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

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

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

  /* 所有自定義組件的激活狀態(tài)都得取消，
    因?yàn)閐eactivateSelect函數(shù)滿足了作為forEach回調(diào)函數(shù)的要求，
    所以我們會(huì)直接使用它而不是用一個(gè)中間的匿名函數(shù)
 */
  selectList.forEach(deactivateSelect);

  /* 開啟該組件的激活狀態(tài) */
  select.classList.add("active");
}
 
/* 該函數(shù)用于讓用戶打開和關(guān)閉選項(xiàng)列表
    需要一個(gè)參數(shù)：
    select：有一個(gè)列表要切換狀態(tài)的DOM節(jié)點(diǎn)
 */
function toggleOptList(select) {

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

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

/* 該函數(shù)用于高亮一個(gè)選項(xiàng)
    需要兩個(gè)參數(shù)：
    select：類名為`select`且包含要被高亮選項(xiàng)的DOM節(jié)點(diǎn)
    option：類名為`option`且要被高亮的DOM節(jié)點(diǎn)
 */
function highlightOption(select, option) {

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

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

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

上面就是處理自定義組件的多個(gè)狀態(tài)所需的所有函數(shù)。

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

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

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

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

    /* 用戶把鼠標(biāo)放到一個(gè)選項(xiàng)上時(shí)，高亮該選項(xiàng) */
    optionList.forEach(function (option) {
      option.addEventListener("mouseover", function () {
        /* 注意：在我們的函數(shù)調(diào)用內(nèi)，`select`和`option`變量都是局部的 */
        highlightOption(select, option);
      });
    });

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

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

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

    /* 組件失去焦點(diǎn)時(shí) */
    select.addEventListener("blur", function (event) {
       /* 注意：在我們的函數(shù)調(diào)用內(nèi)，`select`變量是局部的 */

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

至此，組件已經(jīng)能根據(jù)我們的設(shè)計(jì)來改變其狀態(tài)了，但它的值目前還不會(huì)更新，接下來我們就會(huì)處理這點(diǎn)。

效果

處理組件的值

現(xiàn)在組件已經(jīng)能用了，但我們還得加點(diǎn)代碼，根據(jù)用戶的輸入更新它的值、并讓其能隨著表單數(shù)據(jù)一起發(fā)送它的值。

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

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

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

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

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

  // 設(shè)置選中索引為我們選擇的選項(xiàng)的索引
  nativeWidget.selectedIndex = index;

  // 更新對應(yīng)的值容器
  value.innerHTML = optionList[index].innerHTML;

  // 高亮自定義組件中關(guān)聯(lián)的選項(xiàng)
  highlightOption(select, optionList[index]);
};

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

  return nativeWidget.selectedIndex;
};

我們可以用上面這兩個(gè)函數(shù)來綁定原生組件和自定義組件：

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

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

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

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

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

    // 用戶點(diǎn)擊選項(xiàng)時(shí)，更新對應(yīng)的值
    optionList.forEach(function (option, index) {
      option.addEventListener("click", function (event) {
        updateValue(select, index);
      });
    });

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

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

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

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

上面的代碼里，要注意tabIndex屬性的使用。該屬性用來確保原生組件不會(huì)獲得焦點(diǎn)，并確保自定義組件能在用戶用鍵盤或鼠標(biāo)訪問時(shí)獲得焦點(diǎn)。

通過上面的工作，我們已經(jīng)完成任務(wù)了！下面就是結(jié)果：

效果

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

讓組件變得無障礙

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

幸運(yùn)的是，我們有個(gè)解決方案叫ARIA。ARIA表示“無障礙的富Internet應(yīng)用”，它是個(gè)W3C規(guī)范，用來讓web應(yīng)用和自定義組件變得無障礙?；旧线@個(gè)規(guī)范就是一系列拓展了HTML的特性，用這些特性，我們可以更好地描述角色、狀態(tài)和屬性，讓我們剛才設(shè)計(jì)的元素變得像其盡力模仿的原生元素一樣。使用這些特性很簡單，下面我們來試試。

role特性

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

值得注意的是，ARIA定義的role默認(rèn)會(huì)自動(dòng)用于標(biāo)準(zhǔn)的HTML標(biāo)簽中。比如說，

元素對應(yīng)grid，

元素對應(yīng)list。因?yàn)槲覀兊慕M件使用了
元素，所以得確保組件的listbox role能覆蓋掉
元素的list值。為此，可以使用presentation這個(gè)role值，該值用來指明一個(gè)沒有特殊含義的元素，而且該元素只用來展示信息而已。這里我們會(huì)給
應(yīng)用presentation值。

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

  Cherry
  
  

    
    
Cherry
    
Lemon
    
Banana
    
Strawberry
    
Apple
  

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

aria-selected特性

僅使用role特性是不夠的，ARIA本身也提供了很多許多狀態(tài)和屬性特性。對這些特性用得越多和越恰當(dāng)，網(wǎng)頁就越能被無障礙技術(shù)所理解。在我們的例子中，只會(huì)用到一個(gè)特性：aria-selected。

aria-selected特性用于標(biāo)記當(dāng)前選中的選項(xiàng)，這樣無障礙技術(shù)就能提示用戶當(dāng)前選中項(xiàng)是什么。我們會(huì)在JavaScript中動(dòng)態(tài)地使用它，在用戶選中一個(gè)選項(xiàng)時(shí)能標(biāo)記該選中項(xiàng)。為此，得修改下updateValue()函數(shù)：

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

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

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

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

上述修改的最終效果如下（訪問該組件時(shí)使用無障礙技術(shù)，譬如NVDA或VoiceOver，會(huì)有更好的體驗(yàn)）：

效果

結(jié)論

至此我們已經(jīng)了解了創(chuàng)建定制表單組件的所有基本知識(shí)，但如你所見，這么做并不簡單，如果使用第三方庫的話會(huì)比自己從頭寫起更好、更簡單（當(dāng)然除非你是想構(gòu)建這樣一個(gè)庫）。

下面是你在自己開發(fā)之前應(yīng)該參考下的庫：

jQuery UI

msDropDown

Nice Forms

更多的庫

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

GPU云服務(wù)器 云服務(wù)器 表單組件 java表單框的組件 表單創(chuàng)建 用jsp創(chuàng)建表單

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112165.html

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

相關(guān)文章

• 【譯】HTML表單高級樣式

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

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

• 【譯】HTML表單高級樣式

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

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

• 【譯】怎樣創(chuàng)建定制表單組件

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

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

• 【譯】怎樣創(chuàng)建定制表單組件

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

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

• 【譯】怎么樣構(gòu)建HTML表單

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

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

發(fā)表評論

登陸后可評論

0條評論

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

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

• 再次認(rèn)識(shí) vertical-align

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

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

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

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

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

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

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

• 【譯】怎樣創(chuàng)建定制表單組件

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

• 「CSS3 」3D效果 & 透視

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

• 重讀《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-第三版》- 第3章 數(shù)組（二）

  閱讀 3276·2019-08-26 14:01
最新活動(dòng)


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

<style id="dg5bj"></style>

<