1

asp.netのselect2を使用していdropdownlistます。コードは次のとおりです。

<script type="text/javascript" src="js/select2.min.js"></script>
<link type="text/css" rel="Stylesheet" href="css/select2.css" />

var v = /* get the select control */
v.select2();

問題は、select2()関数が呼び出されると、タブの順序が機能しなくなることです。したがって、ドロップダウン リストでタブ キーを押すと、フォーカスは次に高い tabindex を持つコントロールに移動せず、ランダムに他のコントロールに移動するように見えます。

関数が呼び出された行にコメントを付けると、この問題は解決しますが、フィルタリングが必要です。ここで説明したフィルタリングの他の手法をいくつか試しましたが、それらは複雑すぎます。Select2 は、JS ファイルと CSS ファイルをインクルードして関数を呼び出すだけなので、非常にシンプルで便利です。

この順序付けの問題を解決するにはどうすればよいですか? または、select2 と同じくらい使いやすい別のフィルタリング オプションがありますか?

4

1 に答える 1

3

数時間の闘争の後、私は問題を解決しました。select2 AJAX コントロールは、タブがフォーカスされるとすぐに、つまり何も入力されていないときにタブが押されると、タブ オーダーを破棄することがわかりました。ただし、テキストが入力された場合、タブの順序は破棄されません。

select2 の自動生成 HTML の内部構造は次のようになります。

<div class="select2-container">
  <a class="select2-choice">
    <span</span>
    <abbr class="select2-search-choice-close" />
    <div> <b></b> </div>
  </a>

  <div class="select2-drop select2-offscreen">
    <div class="select2-search">
      <input class="select2-input select2-focused" tabIndex=<somevalue> />
    </div>

    <ul class="select2-results></ul>
  </div>
</div>

HTML 選択コントロールにテキストが入力されている場合、タブ オーダーは正しく機能しています。テキストが入力されていない場合、タブ オーダーは破棄されます。私はdocument.activeElementfirebug で使用して、両方のケースでフォーカスされたコントロールを見つけました。テキストがない場合はアンカー要素にフォーカスがあり、テキストが入力されている場合は HTML 入力要素にフォーカスがあります。

上記のように、select2.jsHTML input 要素の tabIndex プロパティは正しく設定されていますが、anchor 要素では設定されていません。

解決

でさらに下に指定されている位置に次の行を追加するだけselect2.jsです。

this.container.find("a.select2-choice").attr("tabIndex", this.opts.element.attr("tabIndex"));

次の行を追加します。

this.opts.element.data("select2", this).hide().after(this.container);
this.container.data("select2", this);

this.dropdown = this.container.find(".select2-drop");
this.dropdown.css(evaluate(opts.dropdownCss));
this.dropdown.addClass(evaluate(opts.dropdownCssClass));
this.dropdown.data("select2", this);

this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");

そして前：

search.attr("tabIndex", this.opts.element.attr("tabIndex"));

this.resultsPage = 0;
this.context = null;

// initialize the container
this.initContainer();
this.initContainerWidth();

installFilteredMouseMove(this.results);
this.dropdown.delegate(resultsSelector, "mousemove-filtered",  this.bind(this.highlightUnderEvent));

installDebouncedScroll(80, this.results);
this.dropdown.delegate(resultsSelector, "scroll-debounced", this.bind(this.loadMoreIfNeeded));

したがって、次のようになります。

this.results = results = this.container.find(resultsSelector);
this.search = search = this.container.find("input.select2-input");

this.container.find("a.select2-choice").attr("tabIndex",   this.opts.element.attr("tabIndex")); /* atif */

search.attr("tabIndex", this.opts.element.attr("tabIndex"));

this.resultsPage = 0;
this.context = null;

でこの変更を行いselect2.jsます。明らかに、最小バージョンではなく完全な js バージョンを使用する必要があります。

上記のように、1行追加するだけです。これが正しく行われた場合、VS2008 では行番号 504 になります。

于 2012-08-02T11:55:35.493 に答える