Question

我正在使用Semantic UI Search Selection并使用.dropdown()的非常简单的实现将静态标记转换为可搜索的国家/地区输入。

问题是此输入会自动聚焦，菜单会在页面加载时下降。如果我等到$(window).load()，我可以从元素（及其子元素）中删除active和visible类，但我宁愿在不使用这些类的情况下实例化菜单。< / p>

我的标记看起来如下所示：

$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的代码中没有.dropdown()的其他实例。想法？

编辑：我发现这种情况正在发生，因为表单包含在模态中。当表单位于模态之外时，不会发生此问题。

Answer 1

截至2015年4月，有一个未记录的模态设置，负责聚焦模态中包含的第一个input元素：

autofocus: function() {
    if(settings.autofocus) {
        var
            $inputs    = $module.find(':input:visible'),
            $autofocus = $inputs.filter('[autofocus]'),
            $input     = ($autofocus.length > 0)
                ? $autofocus
                : $inputs
        ;
        $input.first().focus();
    }
},

我们可以在$.fn.modal.settings下使用此设置。因此，以下内容将阻止此模式打开时此搜索输入聚焦：

$('.ui.modal').modal({
    autofocus: false,
}).modal('show');

一个可运行的例子：

$('.ui.modal').modal({
    autofocus: false,
}).modal('show');

$('.ui.dropdown').dropdown();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
  <i class="close icon"></i>
  <div class="content">
    <div class="ui form">
      <div class="field">
        <label>I am a:</label>
        <select class="ui dropdown" name="homeowner_type">
          <option value="">--</option>
          <option value="Homeowner">Homeowner</option>
        </select>
      </div>

      <!-- The dropdown in question -->
      <div class="field">
        <label>Country:</label>
        <div class="ui fluid search selection dropdown">
          <input type="hidden" name="country">
          <i class="dropdown icon"></i>
          <div class="default text">Select Country</div>
          <div class="menu">
            <div class="item" data-value="us"><i class="us flag"></i>United States</div>
            <div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
            <div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
            <!-- additional countries -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

语义UI搜索选择不会在模态加载时保持折叠/不聚焦

1 个答案: