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觸發點擊焦點，但不是如果點擊焦點

回答

相關問題