时间戳

首页 > 解决方案 > 如何通过键盘和鼠标访问 input[type="date"]？

javascript - 如何通过键盘和鼠标访问 input[type="date"]？

问题描述

我在我的代码中使用了本机 html5 输入日期选择器，到目前为止它对我来说工作正常（我只关心 chrome 和 edge）。但我面临一个问题：我想要一种统一的方式来访问日期选择器，但我注意到在我的日期选择器中有一个无法通过键盘访问的日期选择器按钮（伪元素），我试图删除伪 -元素通过使其不显示，但随后我失去了通过鼠标打开弹出日历的功能。

根据可访问性标准，如果一个元素可以通过鼠标访问，它也应该可以通过键盘访问。所以我需要一个解决方法。

我正在寻找以下解决方案之一 - （其中任何一个都可以）

  1. 使日期图标可通过键盘访问。

  2. 删除日期图标并通过鼠标单击而不是单击图标弹出日历。

有谁知道这个问题的解决方案？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DatePicker</title>
    <style>

    </style>
</head>
<body>
    <label for="mydate">DOB:</label>
    <input type="date" id="mydate">
</body>
</html>

标签： javascripthtmlcssdatepickeraccessibility

解决方案

您正在使用本机元素，因此根据定义，没有唯一的解决方案，因为每个浏览器都可以以不同的方式实现它。

这既是原生元素的优点也是缺点。如果可以访问，那是最好的；如果它不可访问，实际上修复它不是你的责任，而是浏览器实现者的责任。

如果您尝试在给定环境中修复组件的可访问性，则在尚未测试修复的其他环境中创建问题的风险很大。通常，您不应尝试干扰本机元素的内部工作，超出您可以在标准中配置的范围。顺便说一句，你有资金的不可访问按钮甚至可能在标准 DOM 中无法访问，因此可能完全无法对其做任何事情。

如果您想完全控制，您需要实现自己的日期选择器。但是请记住，您自己的解决方案通常比本地解决方案更难访问。

一般来说，原生组件更易于访问，并且它们的行为适应运行的平台。如果它们目前无法访问，它们应该会随着时间的推移而改进，而无需您更新代码。这就是为什么您通常应该总是更喜欢原生组件而不是任何自制或库提供的组件。对于您和用户来说，使用原生组件原则上是长期的胜利。

推荐阅读