Chosen: html5には属性のサポートが必要ですか？

@Aharitoこれを支配することでタブオーダーの問題にぶつかりませんか？

@Aharitoに感謝します。選択したv1.1.0でうまく機能しています。 $('select.chzn')を$('.chosen-select')置き換えるだけです。

私はそのクリップを試したと思いました：rectトリック、そしてそれに関するいくつかの問題を見つけました。 たぶん古いブラウザで？ 今それが機能しているのは素晴らしいことだと思います。

私のソリューションにもタブの問題があるかもしれないと思います（覚えていません、しばらく経ちました）-必要な属性を提示するフィールドにパッチを適用するだけで影響を減らしました。

$().chosen()へのすべての呼び出しでこれを標準化しました

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !options || _.isObject(options)

  if (is_creating_chosen && select.css('position') === 'absolute') {
    // if we are creating a chosen and the select already has the appropriate styles added
    // we remove those (so that the select hasn't got a crazy width), then create the chosen
    // then we re-add them later
    select.removeAttr('style')
  }

  var ret = select.oldChosen(options)

  if (is_creating_chosen) {
    // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
    // only do this if we are initializing chosen (no params, or object params) not calling a method
    select.attr('style','display:visible; position:absolute; clip:rect(0,0,0,0)');
  }
  return ret
}

@ghiculescuそれは、選択へのタブ移動または

@DASPRiDいいえ。

可能なカバーアップソリューションとしてこれはどうですか。

完璧ではありませんが、実際には、次に選択したダイアログボックスにフォーカスを渡すことで、元の選択が表示されなくなりますが、おそらくもう1つのステップに近づいています。

「chosen-select」は、特定のクラスでの選択のセレクターにすぎません。「クリックフォーカス」が、フックする必要のあるそれぞれのイベントをすべてカバーしているかどうかはわかりませんが、他に何が欠けているかを誰かが言うことができるでしょうか。

選択したhtml構造について何かを誤解していて、find（ "a"）がリベラルすぎる可能性もあります。誰か、もっと経験がありますか？

$(".chosen-select").on("click focus",function(event){
    $(this).next(".chosen-container").find("a").trigger(event.type);
});

ああ、確かに「 display：visible 」は「 display：block 」か何かである必要がありますか？ 原因visibility：visibleは有効ですが、 display：visibleはそうではないと確信しています

私が見つけたのは、同じコンテナ内に複数の選択が隣り合っている場合、それらすべてが間違った場所に移動するため、position：absoluteの場合、検証メッセージが間違った位置に表示されるということです。

私はこれを、選択したコンテナから取り外して再度取り付けることで解決しました。

$(".chosen-select").each(function(){
    $(this).next(".chosen-container").prepend($(this).detach());
});

上記の解決策は、さらに調査した結果、フィールドのタブ移動が完全に無効になり、問題を解決できないことを示していますが、タブ移動時に選択がポップアップする問題は解消されます。私の心の重要な問題は、表示が壊れないようにタブを付けなくても生活できることです。モバイルデバイスを使用していて、タブを付けていない人が増えているので、デスクトップユーザーにのみ影響しますが、それでも重要です。比較的言えば、管理可能です。

しかし、誰かが何らかの方法でそれを解決した場合、私はそれを見つけることに非常に興味があります。

さて、以前に試していたものに加えて、選択したイベントが使用されていることがわかり、非表示になっている選択でイベントを実行すると、それを乗っ取って、選択したイベントをトリガーして開くことができると判断しました。

私はそれがうまくいくと思います。

$(".chosen-select").each(function(){
    //    take each select and put it as a child of the chosen container
    //    this mean it'll position any validation messages correctly
    $(this).next(".chosen-container").prepend($(this).detach());

    //    apply all the styles, personally, I've added this to my stylesheet
    $(this).attr("style","display:block!important; position:absolute; clip:rect(0,0,0,0)");

    //    to all of these events, trigger the chosen to open and receive focus
    $(this).on("click focus keyup",function(event){
        $(this).closest(".chosen-container").trigger("mousedown.chosen");
    });
});

これは私が今まで持っている中で最高のバージョンだと思います。 幸いなことに、これにより順方向のタブの問題が解決されますが、逆方向のタブがまだあります。選択した要素にタブで移動すると、すぐに選択したコンテナに再びフォーカスするため、選択した選択を逆方向にタブで移動することはできません。前方にタブで移動することしかできないことに再び閉じ込められました。

前の要素を追跡することはアイデアかもしれません。以前にタブフォーカスがあった要素が現在のフォーカスされた要素の前にあった場合は、後方に移動し、選択したものへの再フォーカスを適切にスキップして前のタブを選択しますが、どうすればいいのかわからない。

非常に長い間読んだ後、私は何年にもわたって提出された提案を試したと思いました。

残念ながら、 @ christhomasのコードを

幸いなことに、 おやつのように機能します。

@DASPRiD @charettesタブが変更された関数で機能しないとはどういう意味ですか？ それは私のために働いているようです

tabindexを追加するのに十分簡単： @ghiculescuのスニペットへの選択に-1を追加して、タブの問題を解決します。

例： http ：

私は今問題を見ることができました！ あなたの追加はうまくいきます@andreialecu

ちなみにもう1つ必要な追加がありました。 iPhoneやその他のサポートされていないデバイスでは、フィドルは正しく機能しませんでした。 ChosenはiPhoneで自分自身を無効にし、 <select>変更せずに残します。上のフィドルのコードはそれを非表示にし、selectと対話する方法を残しません。

このフィドルはそれを修正します（表示を追加することによって：なしチェック）：
http://jsfiddle.net/hq7b426j/1/

ああ、それはさらに良いです！ ありがとう！ 私もまだテスト中ですが、他に何かあったら投稿します

@CaptainN簡単に説明してください私は同じ問題を抱えています。 wr私はそのコードを置く必要があります。 wrapbootstrapのinspinaテーマを使用しています。

@ vidhyaprakash85どういう意味かhttps ：

私はすでにhttps://github.com/harvesthq/chosenを使用してい

@andreialecuコードは

ありがとう@christhomasあなたのコードは

@christhomasまたは@ghiculescuどちらが多グループ化された選択を使用して私のために働きました。 今のところサーバー検証に任せています。

@ghiculescuパッチを試してみた
@christhomasパッチを試した

@ghiculescuのスクリプトを変更して、

target.find('select')
        .chosen('destroy')
        .chosen({disable_search_threshold: 10})

それ以外の場合、2回目の旅行では、最初の旅行で追加されたスタイルが削除されました。

$.fn.oldChosen = $.fn.chosen
$.fn.chosen = function(options) {
  var select = $(this)
    , is_creating_chosen = !!options

    var style = 'display:visible; position:absolute; clip:rect(0,0,0,0);'

        if (is_creating_chosen && select.css('position') === 'absolute' && select.attr('style') != style) {
            // if we are creating a chosen and the select already has the appropriate styles added
            // we remove those (so that the select hasn't got a crazy width), then create the chosen
            // then we re-add them later
            select.removeAttr('style')
        }

        var ret = select.oldChosen(options)

        // only act if the select has display: none, otherwise chosen is unsupported (iPhone, etc)
        if (is_creating_chosen && select.css('display') === 'none') {
            // https://github.com/harvesthq/chosen/issues/515#issuecomment-33214050
            // only do this if we are initializing chosen (no params, or object params) not calling a method
            select.attr('style', style);
            select.attr('tabindex', -1);
        }
        return ret
}

&& select.attr('style') != style場合、この追加条件を1番目に追加しました。

@doganmeh Chromeとモバイル（Chromeを使用）ではうまく機能しますが、

このhttp://jsfiddle.net/hq7b426j/1/でさえ

うーん、でもこれはFirefoxの問題のようです。ボタンを何度もクリックすると、Firefoxがメッセージを表示しようとすることがわかります（ただし、完全にレンダリングされることはありません）。

私はこのソリューションを使用しました。 それは非常にシンプルで完璧に機能します：

<style>
    select.submitted:invalid + .chosen-container{
        border-color: red !important;
    }
</style>

$('#yourSelector').chosen({
                no_results_text: "yourText",
                disable_search_threshold: 9,
                search_contains: true
                //your parameters
    }).on('invalid', function(){
        $(this).addClass('submitted');
    });

複数の選択肢を選択した場合、これは機能しないようです。
http://jsfiddle.net/jeromax/o5a8aogh/

それを私が直した。

`
$ .fn.oldChosen = $ .fn.chosen
$ .fn.chosen =関数（オプション）{
var select = $（this）、
is_creating_chosen = !!オプション;

if（is_creating_chosen && select.css（ 'position'）=== 'absolute'）{
//選択したものを作成していて、その選択したものに適切なスタイルがすでに追加されている場合
//それらを削除して（選択がクレイジーな幅にならないように）、選択したものを作成します
//後でそれらを再度追加します
select.removeAttr（ 'style'）;
}

var ret = select.oldChosen（options）

//選択に表示がある場合にのみ動作します：なし、それ以外の場合、選択はサポートされていません（iPhoneなど）
if（is_creating_chosen && select.css（ 'display'）=== 'none'）{
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
//これは、メソッドを呼び出さずに選択されたもの（paramsまたはobject paramsなし）を初期化する場合にのみ実行します

  $(this).each(function(index){
      if($(this)[0].multiple==true){
          $(this).attr('style','display:visible; width:0px; height:0px; margin-top:25px; position:absolute; clip:rect(0,0,0,0)');
      }else{
          $(this).attr("style","display:visible; position:absolute; clip:rect(0,0,0,0)");
      }
  })

select.attr（ 'tabindex'、-2）;

}
retを返す
}
`

+1

誰かがこれの修正をコミットできますか？ これはかなり古い問題であり、最近では非常に重要な機能です。 ありがとうございました。

最新バージョンでは動作しません。

これは、angular-chosenを使用する場合にも、angular.jsフォームの検証を破っているようです。

2018年ですが、まだ同じ問題が発生しています。 HTML標準が正しく機能せず、外部プラグインと統合できないのは地獄です。 クレイジータイムズ:)

これは、Drupalが選択したプラグインも壊しています。 https://www.drupal.org/project/chosen/issues/2705891を参照して

回避策以外に、これに対する適切な解決策が見つかりませんでした。

<div class="form__select">
  <select class="chosen">
    <!-- options -->
  </select>
</div>

.form__select {
    position: relative;
}

.form__select .chosen {
    display: block !important;
    height: 0;

    position: absolute;
    left: 35px;
    bottom: 0;

    outline: none;
    border-color: white;

    pointer-events: none;
}

すべてのselect要素にChosenを使用している場合は、このCSSを使用して、（DOMに）表示されるように変更できますが、不透明度、高さ、絶対位置はありません。

これらのCSSセレクターは無効な選択要素を対象とし、そのうちの1つはmultipleを対象とし、 15px margin-topを追加して複数選択要素の中央に配置します。

select:invalid {
    height: 0px !important;
    opacity: 0 !important;
    position: absolute !important;
    display: flex !important;
}

select:invalid[multiple] {
   margin-top: 15px !important;
}

デモ： http ：

しかし、本当に...これはすでにChosen.JSライブラリによって処理されているはずです

役に立った場合の回避策は次のとおりです。

// Initialise Chosen
$(function () {
    $('select').chosen();
});

// Place the original input behind the Chosen input, matching the height and width so that the warning appears in the correct position
$('select').on('chosen:ready', function () {
    const height = $(this).next('.chosen-container').height();
    const width = $(this).next('.chosen-container').width();

    $(this).css({
            'position': 'absolute',
            'height': height,
            'width': width,
            'opacity': 0
        })
        .show();
});

@jonathanbullコンテキスト内で表示できますか？ 私はあなたの解決策を試しましたが、うまくいきませんでした。

@AndrewSouthpawこれは私のコードです、修正は私にとってはうまくいきます:)

$("#select").val([]); // disable default selection by browser
$('#select').on('chosen:ready', function(evt, params, chosen) {
    $(this).css({'position': 'absolute', 'height': 0, 'opacity': 0}).show();
});
$("#select").chosen();

私はわずかに異なるコードを使用しています（ここのコードに基づいています）：

$('.chosen-select').on("chosen:ready", function (evt, data) {
  $(this)
    .addClass('chosen_hidden')
    .attr('tabindex', '-1')
    .prependTo(data.chosen.container)
    .show()
  })
  .chosen({width: '100%'})

.chosen_hidden {
  position: absolute;
  top: 0;
  bottom: 0;
  max-height: 100%; // required for IE 10
  // **not required** opacity: 0;
}

'destroy'アクションは処理しませんが、エラーメッセージを適切に配置し、FirefoxとChromiunで機能するようです。 元のセレクターは非表示になっていないため、エラーハイライトの境界線が表示されます。 更新： max-heightすると、IEでも機能します。 その他の更新：tabindex -1を追加して、フォーカスを受け取らないようにします。 （まだフォーカス可能であり、エラーメッセージを受信して​​いる間）。

これを解決するオープンPRがありましたが、ターゲットにした他のスレッドが閉じられたため、失われたと思います。 ＃2594を参照

@jhedstromはそれがマージされるのを見たいと

上記の@eloyespのソリューションに似たものを使用し、ここで共有しました。

https://github.com/harvesthq/chosen/pull/2594#issuecomment -714806139

私を正しい方向に向けてくれてありがとう@jhedstrom ！