【译】怎样创建定制表单组件

第二，我们还得添加两个新的类名，实现隐藏不需要的元素（即在脚本能运行时的元素、或脚本不能运行时的自定义组件）。要注意的是在默认情况下，此处的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标准的多种浏览器下运行。

专线服务 idc机房托管 表单组件 java表单框的组件 表单创建 用jsp创建表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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

  阅读 2840·2023-04-25 15:44

• 再次认识 vertical-align

  阅读 1751·2019-08-30 13:11

• 自定义占位文本(placeholder)的样式

  阅读 2710·2019-08-30 11:11

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

  阅读 2821·2019-08-29 17:21

• 360前端星学习笔记-深入css(2)

  阅读 1194·2019-08-29 15:38

• 【译】怎样创建定制表单组件

  阅读 749·2019-08-29 12:49

• 「CSS3 」3D效果 & 透视

  阅读 1674·2019-08-28 18:19

• 重读《学习JavaScript数据结构与算法-第三版》- 第3章 数组（二）

  阅读 3124·2019-08-26 14:01
云社区相关服务
提问 学习 认证 产品 技术服务 售前咨询
最新活动







阅读需要支付1元查看
支付并查看
<