jQuery触发点击焦点,但不是如果点击焦点
问题描述:
我正在一个MDL网站工作。有known issue,他们仍然没有给出默认的select
表单元素。我找到的解决方案是使用menu component,这将显示何时点击input
。效果很好。但我注意到,当使用TAB键对输入进行聚焦时,菜单不会显示出来。所以我把它放在jQuery中:jQuery触发点击焦点,但不是如果点击焦点
/*
Make menus show up on input focus
*/
$('.mdl-textfield__input').focus(function(){
$(this).click();
});
这适用于在TAB驱动焦点上显示菜单。但问题是,现在当我点击输入时,它会显示然后隐藏菜单。真正的点击显示它,并从我的代码中的下一个模拟点击将导致它关闭。
我想知道是否可以告诉焦点状态是否由点击驱动,并且条件我的jQuery代码。所以如果焦点是由点击驱动的,那么我不需要模拟点击?
这里是MDL HTML代码的示例:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label {% if form.errors.gender %}is-invalid{% endif %}">
<label class="mdl-textfield__label" for="gender">Gender</label>
<input class="mdl-textfield__input" id="id_gender" name="gender" type="text" readonly value="{{ form.gender.value }}" readonly>
<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect select-menu" for="id_gender">
<li class="mdl-menu__item" data-val="m">Male</li>
<li class="mdl-menu__item" data-val="f">Female</li>
<li class="mdl-menu__item" data-val="t">Transgender</li>
<li class="mdl-menu__item" data-val="o">Other</li>
</ul>
<span class="mdl-textfield__error">{{ form.errors.gender.as_text }}</span>
</div>
答
$('body').on('focus', '.mdl-textfield__input', function(e){
$(this).trigger('click')
});