3

我正在tabindex使用 primeng 5.2.0 和 angular5 在我的项目中使用制表符 ()。问题是我无法使用选项卡选择日期，所以我必须使用鼠标来完成，当我选择一个日期时，该p-calendar字段会失去焦点和制表符中断。下面是标签可以正常工作的示例代码。

使用鼠标选择日历日期后，如何使制表符起作用？请指导

<tr tabindex="1"><input type="email" placeholder="aa@aa.com"/></tr>
<tr tabindex="2"><p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar></tr>
4

1 回答 1

0

如果需要键盘控制，PrimeNG 可能不是最合适的。在选择库之前根据您的要求对库进行结构化评估始终是一个好主意。

如果您最适合仍然缺少要求，例如键盘可访问性，那么如果它是一个开源库，那么您很幸运：您可以参与它的开发。

前往github并打开与包维护者的对话。看看键盘可访问性是否在他们的议程上。

  • 帮助测试键盘交互和文件结构问题
  • 让您最重要的组件可以自己访问，并提交 Pull Request
  • 开始赏金以解决您在图书馆中最重要的问题

关于选择日期后重点关注的手头问题<body>：

  1. 对于键盘用户来说，输入日期通常比从网格中选择要快得多。作为一个 UXP，我观察到用户摇动他们的小键盘并输入日期比日期选择器滑入的速度更快。

  2. 由于日期选择器将被视为一个对话框，因此打开它的元素应该集中在关闭

    当对话框关闭时，焦点返回到调用对话框的元素 […]

    对话框和日期选择器对话框示例的 aria 键盘实践

对于您找到的任何解决方法，您都应该牢记这一点。一个建议可能是这样的：

  • 绑定到onClose日期选择器以聚焦输入

此外，您可以申请

  • [showOnFocus]="false"允许输入日期
  • 提供 aplaceholder来解释预期的格式（理想情况下也是 a title）
  • [showIcon]="true"仍然提供对话框切换
  • 在这种情况下，将切换焦点放在之后onClose而不是输入
于 2019-12-06T20:30:36.410 回答