6

select2 jquery プラグインを壮大なポップアップと一緒に使用します。開いているポップアップで選択をクリックすると、検索ボックスにいくつかの結果が表示されます。問題は、検索ボックスに何も入力できないことです。カーソルが表示されません。これはhttp://jsfiddle.net/clime/qweWa/15/の問題を示す jsfiddle です。コードは次のようになります。

# html
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

<div id="test-popup" class="white-popup mfp-hide">
    <select id="focus-blur-loop-select">
        <option>hello</option>
        <option>world</option>
    </select>
</div>

# js
$(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    midClick: true
  });

  $('#focus-blur-loop-select').select2({
      width: '200px'
  });
});

# css
.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

私はすでにいくつかの基本的な調査を行っており、以下の 2 つのコールバックが無期限に呼び出されることがわかりました。イベントにはいくつかの無限ループがあるようです。

// select2.js:742
search.on("focus", function () { search.addClass("select2-focused"); });
search.on("blur", function () { search.removeClass("select2-focused");});
4

2 に答える 2

4

magnificPopup 呼び出しで「フォーカス」オプションを使用する必要があります。

$('.open-popup-link').magnificPopup({
  type:'inline',
  focus: '#focus-blur-loop-select',
  midClick: true
});

magnificPopupのドキュメントでは、次のように定義されています。

フォーカス (空の文字列)

フォーカスするポップアップ内の要素の CSS セレクターを含む文字列。理想的には、フォーカスできる popup の最初の要素にする必要があります。たとえば、'input' または '#login-input' です。ポップアップ自体にフォーカスするには、空のままにします。

于 2016-07-11T09:30:03.540 に答える