Question

我正在MDL网站上工作。有known issue他们仍然没有提供默认的select表单元素。我找到的解决方案是使用menu component，它会在点击input时显示。效果很好。但是我注意到当使用TAB键聚焦输入时菜单不会显示。所以我把它放在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>

Answer 1

我在使用 Drupal Superfish 移动菜单时遇到了完全相同的问题，并在此处找到了答案Detect if focus event was triggered by user/browser or jQuery

该答案特别适用于点击次数，但您可以针对其中任何一个进行返工。应该是这样的：

var isUserClick = false;
$('.mdl-textfield__input').mousedown(function(){
   isUserClick = true;
});
$('.mdl-textfield__input').focus(function(e){
  if (isUserClick === false){
    $(this).click();
  } else {
    isUserClick = false;
  }
});

Answer 2

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

jQuery触发器单击焦点，但如果单击焦点则不会

2 个答案: