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>

来源

2016-09-22 jeffery_the_wind

-1

$('body').on('focus', '.mdl-textfield__input', function(e){ 
    $(this).trigger('click') 
});

来源

2016-09-22 09:54:50

jQuery触发点击焦点，但不是如果点击焦点

回答

相关问题