日历小部件 (JavaScript) 和可用性问题
我想使用日历小部件来帮助用户选择日期。
我希望使用任何独立的日历或作为 jQuery 插件。在我的项目中，我使用 jQuery，并且不想使用任何其他框架。
我看了很多日历，但都有同样的问题。我现在将描述它，如下所示：
有两种可能的方式来显示日历：
- 单击某个按钮、图标等来显示它。
- 单击文本字段（我们将在其中看到日期选择的结果）来显示它
我选择了第二种方式。就我而言，我只有一个文本字段，没有任何附加图标、按钮等。 当此文本字段获得焦点时，日历将显示。当用户选择任何日期时，日历将被隐藏，文本字段将显示所选日期。
这里我有主要问题......
出现日历后，文本字段失去焦点。选择日期后，焦点没有回到该字段，并且 tab 键（键盘上）开始从头开始运行。
从可用性的角度来看，如果当用户完成从日历中选择日期并且所选日期显示在文本字段中时，他可以继续使用 tab 键转到下一个文本字段，那就太好了。
有什么想法如何解决吗？
PS我只有一个想法，但我不喜欢它，因为它看起来有点难看
当日历显示时，我可以销毁文本字段上的事件处理程序（焦点事件）。 当用户选择的日期和日历消失时，我可以将焦点设置在此文本字段上，并再次为此文本字段附加事件侦听器（焦点）。
I want to use Calendar widget to help users select date.
I wish use any standalone calendar or as a jQuery plugin. In my project I'm using jQuery, and I don't want to use any other frameworks.
I saw a lot of calendars, but they all has the same problem. I will describe it now, see below:
There are possible two way to show up calendar:
- to click on some button, icon etc to show it up.
- to click on text field (where we will see result of date selection) to show it up
I chose the second way. In my case I will have only ONE text field without any addition icons, buttons etc.
When this text field get focus the calendar will be show up. When user selected any date, calendar will be hidden, and text field will show selected date.
And here I have main problem...
After appearing the calendar the text field is loosing focus. And after selection date, focus did not got back to this field, and tab key (on keyboard) beginning run from start.
From usability point it would be good if when user finish selection date from calendar, and selected date shows up in text field, he can keep using tab key to go to next text field.
Any ideas how to solve it ?
P.S. I have only one idea, but I don't like it, because it looks me little bit ugly
When calendar is shows up, I could destroy event handler (focus event) on text field.
When user selected date and calendar is disappearing, I can set focus on this text field and attach event listener (focus) for this text field again.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
由于 JavaScript 是单线程语言，因此您只需将变量（
disableEvents或其他内容）设置为 true，然后在调用.focus()时将其设置回 false -这不会造成任何麻烦，也不需要太多工作。Since JavaScript is a singlethreaded language, you can simply set a variable (
disableEventsor something) to true and set it back to false when you've called.focus()- this won't cause any troubles and doesn't require much work.jQuery-UI 的 datepicker 不会将焦点发送到弹出日历小部件，而是用户应该使用更改日期的替代控件，此外，这将允许用户手动输入日期（如果他们选择）。
jQuery-UI's datepicker doesn't send focus to the popup calendar widget, instead the user is expected to use alternative control to change the date, additionally this would allow the user to manually type the date in should they so choose.