grails - GSP日期选择器:为每个字段(天,月,年)添加标签

标签 grails datepicker accessibility

我按照grails文档中的建议使用了GSP日期选择器,但是这导致了一个组件,使用屏幕阅读器不容易访问该组件。我的首选解决方案是为每个标签都贴上标签,或仅添加一个后缀(例如购买日期(天)...)。此日期选择器是否可能实现此功能,还是我必须自己实现日期选择器?

GSP:

<g:datePicker name="buyDate" precision="day" default="${new Date()}" value="${book.buyDate}"/>

产生的HTML:
<label for="buyDate"> Buy date</label>
<input type="hidden" name="buyDate" value="date.struct">
<select name="buyDate_day" id="buyDate_day" aria-labelledby="buyDate">
<option value="1">1</option>
...
</select>
<select name="buyDate_month" id="buyDate_month" aria-labelledby="buyDate"><option value="1">Januar</option>
...
</select>
<select name="buyDate_year" id="buyDate_year" aria-labelledby="buyDate"><option value="2119">2119</option>
...
</select>

最佳答案

仅使用grails datepicker是不可能的。但是,您可以通过javascript轻松添加自己的标签,或者使用UI框架中的现有datepicker。我不确定“添加后缀”是什么意思,所以不确定如何在其中提供帮助。

通过jquery添加标签的简单方法示例:

$("select[id^='buyDate_']").each(function(idx, el) { 
    $(el).before("<label for='" + $(el).attr("id") + "'>" + $(el).attr("id").replace("buyDate_", "") + ": </label");
});

关于grails - GSP日期选择器:为每个字段(天,月,年)添加标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57466171/

相关文章:

gwt - 有人碰巧看到了 Grails+GWT 项目的 Maven 原型(prototype)吗?

session - 如何存储操作的参数以供以后再次使用

javascript - Bootstrap 日期选择器 UI 问题

objective-c - 在 Swift/Objective-C 中监听窗口调整大小事件

performance - 提高Grails命令行性能

grails - 在Grails的GORM中添加更改监听器

javascript - flatpickr,链接两个输入字段以获取句点

android - 在android中的日期选择器对话框中显示当前日期

javascript - div 元素是否有等效于 "alt"的属性?

Android TalkBack : Is there a Listener to catch all Accessibility Events?