Question

我有一个简单的下拉列表，当您单击它时会打开一个搜索字段。即使我将此搜索的文本字段设置为自动对焦，但它并不适用于所有浏览器。

我将使用什么Javascript / jQuery方法来检查包含的UL css显示是否设置为阻止，以便我可以使用.focus（）强制焦点在该字段上。

HTML：

<a href="#" id="quickSearch" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quick Search</a>
<ul class="dropdown-menu" role="menu">
  <li id="li-quicksearch">
      <form id="mainSearch" class="form-search">
        <p>
            <input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
            <button type="submit">SUBMIT</button>
        </p>
      </form>
  </li>
</ul>

Answer 1

编辑：没有css更改事件，因此您必须以两种方式之一解决问题。

检查设置间隔中的dom元素以查看其css是否已更改
在用户交互/您的代码更改dom元素的css时触发事件。

第一种方式看起来像这样：

var element = $(".dropdown-menu");
function checkForChanges()
{
    if (element.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
    setTimeout(checkForChanges, 500); // does this every half second.
}

或第二种方式：

$('.toggle').on('click', function() {
    $('.dropdown-menu').toggle();
    $('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
    if($(this).css(.css('display') == 'block')
    {
        // do your .focus() stuff here
    }
});

Answer 2

您可以使用纯 JavaScript 检查ul的显示值：

<强> JS ：

var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
  //do what you want.
}

或使用 jQuery ：

if ($('.dropdown-menu').css('display') === 'block') {
   //do what you want.
}

Answer 3

看起来您正在使用bootstrap来创建下拉列表。如果是这种情况，您可以使用＆＃34;显示＆＃34;事件。但是，您需要将事件附加到容器元素上。

HTML

<div class="quickSearchContainer">
    <a href="#" id="quickSearch" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Quick Search</a>
    <ul class="dropdown-menu" role="menu">
        <li id="li-quicksearch">
            <form id="mainSearch" class="form-search">
                <p>
                    <input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
                    <button type="submit">SUBMIT</button>
                </p>
            </form>
        </li>
    </ul>
</div>

的Javascript

$('#quickSearchContainer').on('show.bs.dropdown', function () {
    $('#inputSearch').focus();
});

Answer 4

我想感谢大家的意见，但我找到的工作解决方案是修改引导程序JS，以便在下拉列表的OPEN的toggleClass上进行自动对焦。每个人都获得了荣誉！

用于CSS更改的Javascript / jQuery监视

4 个答案:

HTML

的Javascript