我正在尝试改变html表单中选择的行为。
我希望当用户使用键盘导航表单时,如果他们正在选择一个元素并按tab键,则该元素被选中,焦点切换到下一个表单输入。通常,您需要按enter键来选择元素,然后可以使用tab切换到下一个元素。如果未按enter键,则不选择任何选项。
要做到这一点,我想捕获TAB键并触发一个回车键,后跟一个TAB。
这是我现在的内容:
$('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
var x = jQuery.Event('keydown', {which: 9});
$(this).trigger(x);
}
});
下面是一个示例:JSFiddle
代码'工作'到e.p preventdefault (), tab键不能切换焦点到下一个输入。但是,没有触发enter和tab操作,因此什么也不会发生。我该怎么办?提前谢谢你!
更新10/10:找到问题!触发事件x (tab键)使代码进入无限循环。因此,整个方法是错误的。
当我尝试传递which
作为事件对象时,它确实工作jsfiddle.net/mendesjuan/sL7tnfm6/5
$('form[class="ui form"]').on('keydown', 'div[class="ui fluid selection dropdown active visible"]', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
}
});
问题中的代码草案触发了一个无限循环。问题的关键在于,当用户按下TAB键并将焦点切换到下一个元素时,捕获所选(活动)元素。
因此,最好使用一个名为onblur
的函数:
$('form[class="ui form"]').on('blur', '.dropdown', function () {
var y = jQuery.Event('keydown', {which: 13});
$(this).trigger(y);
});