Chosen: html5 erforderliche Attributunterstützung?

@Aharito Werden wir damit nicht das Tab-Reihenfolge-Problem lösen?

Danke @Aharito, es funktioniert super mit der gewählten v1.1.0, ersetze einfach $('select.chzn') durch $('.chosen-select') .

Ich dachte, ich hätte diesen Clip ausprobiert: Rec-Trick und habe ein Problem damit gefunden. Vielleicht mit einem älteren Browser? Ich denke, wenn es jetzt funktioniert, ist das großartig.

Ich denke, dass es bei meiner Lösung auch Probleme mit Registerkarten geben kann (ich kann mich nicht erinnern, es ist eine Weile her) - Ich habe die Auswirkungen reduziert, indem ich den Patch nur auf Felder angewendet habe, die das erforderliche Attribut aufweisen.

Wir haben dies für alle Anrufe auf $().chosen() standardized standardisiert

$.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 Das löst nicht das Problem des Tabulators oder Shift-Tabulators in die Auswahl, oder?

@DASPRiD nein .

Was ist damit als mögliche Vertuschung-Lösung.

es ist nicht perfekt, aber tatsächlich verhindert es, dass die ursprüngliche Auswahl angezeigt wird, indem der Fokus auf das nächste ausgewählte Dialogfeld übertragen wird, aber vielleicht ist es ein weiterer Schritt näher

"chosen-select" ist nur ein Selektor für die Selects, die ich mit einer bestimmten Klasse habe, ich bin mir nicht sicher, ob "click focus" alle entsprechenden Ereignisse abdeckt, an denen ich mich anschließen sollte, aber vielleicht kann jemand sagen, was noch fehlt?

es ist auch möglich, dass ich etwas über die gewählte html-Struktur falsch verstanden habe und find("a") zu liberal ist, hat jemand mehr Erfahrung?

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

oh, und " display:visible " sollte doch " display:block " sein oder so? Ursache v isibility:visible ist gültig, display:visible ist es sicher nicht

Was ich gefunden habe, ist, dass, wenn Sie mehrere Auswahlen nebeneinander im selben Container haben, dies alle an die falsche Position verschiebt, sodass die Position: absolute dann die Validierungsmeldung an der falschen Position erscheinen lässt.

Ich habe dies gelöst, indem ich sie abgenommen und wieder in den ausgewählten Container eingefügt habe, wie so

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

Die obige Lösung zeigt nach weiteren Untersuchungen, dass die Tabulatortaste durch die Felder vollständig deaktiviert wird und ich das Problem nicht lösen kann. Sie beseitigt jedoch das Problem des Popup-Auswählens beim Durchblättern, also ist das mehr wichtiges Problem in meinen Augen, ich kann ohne Tabs leben, wenn ich es haben kann, damit das Display nicht kaputt geht. Da immer mehr Leute mobile Geräte verwenden und sowieso nicht Tabs verwenden, betrifft es nur Desktop-Benutzer, immer noch wichtig, aber relativ gesehen überschaubar.

Wenn das jedoch jemand irgendwie löst, bin ich sehr daran interessiert, es herauszufinden.

ok, weiter zu dem, was ich zuvor versucht habe, fand ich heraus, dass die ausgewählten Ereignisse verwendet wurden, und entschied, dass ich, wenn ich ein Ereignis auf der jetzt ausgeblendeten Auswahl durchführte, es entführen und ein ausgewähltes Ereignis auslösen konnte, um es zu öffnen.

ich denke, es funktioniert gut.

$(".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");
    });
});

Ich denke, das ist die beste Version, die ich bisher hatte. Glücklicherweise löst dies das Vorwärts-Tabbing-Problem, es gibt immer noch das Reverse-Tabbing, Sie können nicht rückwärts durch ein Selected-Select blättern, da Sie beim zweiten Tab in das Select-Element sofort wieder auf den Selected-Container fokussieren, d. wieder gefangen, nur in der Lage zu sein, vorwärts zu tippen.

Es könnte eine Idee sein, das vorherige Element im Auge zu behalten, und wenn das Element, das zuvor den Tabulatorfokus hatte, vor dem aktuell fokussierten Element lag, gehen Sie zurück, überspringen dann die Neufokussierung auf das ausgewählte und wählen Sie den vorherigen Tab aus, aber ich bin mir nicht sicher wie das geht.

Nach einer sehr langen Lektüre dachte ich, ich hätte die Vorschläge, die im Laufe der Jahre eingereicht wurden, ausprobiert.

Leider konnte ich den Code von @christhomas nicht zum

Die gute Nachricht ist, dass die neue Funktion von @ghiculescu wie ein Leckerbissen funktioniert, da ich immer noch die vom CDN ausgewählte Datei verwenden und einfach die Funktion in meiner js-Datei verwenden kann.

@DASPRiD @charettes was meinst du damit, dass die Registerkarte nicht mit der geänderten Funktion funktioniert? Bei mir scheint es zu funktionieren

Einfach genug, um tabindex hinzuzufügen: -1 zur Auswahl des Snippets von

Beispiel: http://jsfiddle.net/hq7b426j/

Ich konnte das Problem jetzt sehen! Deine Ergänzung funktioniert super @andreialecu

Übrigens war noch eine weitere Ergänzung nötig. Auf dem iPhone oder anderen nicht unterstützten Geräten funktionierte die Geige nicht richtig. Chosen deaktiviert sich selbst auf dem iPhone und lässt <select> unverändert, und der Code in der obigen Geige würde es verbergen, sodass keine Möglichkeit besteht, mit der Auswahl zu interagieren.

Diese Geige behebt es (indem Sie eine Anzeige hinzufügen: keine Prüfung):
http://jsfiddle.net/hq7b426j/1/

Ach das ist noch besser!! Vielen Dank! Ich teste auch noch, aber ich werde posten, wenn noch etwas kommt

@CaptainN bitte kurz, ich habe das gleiche Problem. wr Ich muss diesen Code setzen. Ich verwende das Inspina-Theme von Wrapbootstrap.

@vidhyaprakash85 Ich bin mir nicht sicher, was du meinst. Ich hatte vor langer Zeit geforkt und einen Pull-Request (#900) geschrieben, aber die Repos sind jetzt nicht mehr synchron und mein Fork ist sehr veraltet. Sie finden es hier, wenn es hilft: https://github.com/adcSTUDIO/chosen

Ich verwende bereits https://github.com/harvesthq/chosen, wie das geht:(

@andreialecu dein Code funktioniert

Danke @christhomas dein Code hat

Weder @christhomas noch @ghiculescu funktionierten bei mir mit einer mehrfach gruppierten Auswahl. überlasse es vorerst der Servervalidierung.

Als ich den @ghiculescu- Patch
Als ich den @christhomas- Patch ausprobierte,

Ich musste das Skript von @ghiculescu ändern, damit ich

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

Andernfalls hat die zweite Reise den Stil entfernt, der in der ersten hinzugefügt wurde:

$.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
}

Ich habe gerade diese zusätzliche Bedingung zur ersten hinzugefügt, wenn: && select.attr('style') != style

@doganmeh Funktioniert hervorragend in Chrome und mobil (mit Chrome), aber in Firefox 53.0 getestet, wo es nicht funktioniert

Auch dieses http://jsfiddle.net/hq7b426j/1/ funktioniert nicht in Firefox 53.0

Hmmm, aber das scheint eher ein Firefox-Problem zu sein, denn wenn Sie mehrmals auf die Schaltfläche klicken, werden Sie sehen, dass Firefox versucht, die Nachricht anzuzeigen (diese wird jedoch nie vollständig gerendert).

Ich habe diese Lösung verwendet. Es ist ganz einfach und funktioniert perfekt:

<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');
    });

es scheint, dass dies nicht funktioniert, wenn Sie mit Mehrfachauswahl ausgewählt haben:
http://jsfiddle.net/jeromax/o5a8aogh/

Ich habe es repariert.

`
$.fn.oldChosen = $.fn.chosen
$.fn.chosen = Funktion (Optionen) {
var select = $(dieses),
is_creating_chosen = !!Optionen;

if (is_creating_chosen && select.css('position') === 'absolut') {
// wenn wir einen Auserwählten erstellen und der Auswahl bereits die entsprechenden Stile hinzugefügt hat
// wir entfernen diese (damit die Auswahl keine verrückte Breite hat), dann erstellen wir die ausgewählten
// dann fügen wir sie später wieder hinzu
select.removeAttr('style');
}

var ret = select.oldChosen(Optionen)

// nur handeln, wenn die Auswahl die Anzeige hat: keine, andernfalls wird die Auswahl nicht unterstützt (iPhone usw.)
if (is_creating_chosen && select.css('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// tue dies nur, wenn wir ausgewählte (keine Parameter oder Objektparameter) initialisieren und keine Methode aufrufen

  $(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);

}
zurück
}
`

+1

Kann jemand einen Fix dafür festlegen? Es ist ein ziemlich altes Problem und heutzutage eine sehr wichtige Funktionalität. Dankeschön.

Funktioniert nicht mit der neuesten Version.

Dies scheint auch bei der Verwendung von angle-chosen die Formularvalidierung von angle.js zu unterbrechen.

Es ist 2018 und wir haben immer noch das gleiche Problem. Es ist eine Hölle, wie HTML-Standards nicht richtig funktionieren und mit externen Plugins integriert werden können. Verrückte Zeiten :)

Dies bricht auch das von Drupal gewählte Plugin. Siehe https://www.drupal.org/project/chosen/issues/2705891

Konnte keine richtige Lösung dafür finden, außer einer Problemumgehung:

<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;
}

Wenn Sie Chosen für alle select Elemente verwenden, können Sie dieses CSS verwenden, um es sichtbar zu machen (für DOM), aber keine Deckkraft, keine Höhe, absolute Position.

Diese CSS-Selektoren zielen auf ungültige Auswahlelemente ab, wobei einer von ihnen auf multiple abzielt und ein 15px margin-top hinzufügt, um es auf die Mehrfachauswahlelemente zu zentrieren.

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

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

Demo: http://jsfiddle.net/tripflex/2zdeu9oc/

ABER WIRKLICH ... dies sollte bereits von der Chosen.JS-Lib übernommen werden

Hier ist mein Workaround, falls es von Nutzen ist:

// 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 kannst du es im Kontext zeigen? Ich habe deine Lösung ausprobiert und es hat nicht funktioniert.

@AndrewSouthpaw Dies ist mein Code, Fixes funktioniert gut für mich :)

$("#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();

Ich verwende einen etwas anderen Code (basierend auf dem Code hier):

$('.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;
}

Es behandelt nicht die Aktion 'Zerstören', aber es positioniert die Fehlermeldung gut und scheint auf Firefox und Chromiun zu funktionieren. Da der ursprüngliche Selektor nicht ausgeblendet ist, ist der Fehlerhervorhebungsrahmen sichtbar. Update : mit max-height funktioniert es auch im IE. Anderes Update : Fügen Sie tabindex -1 hinzu, um sicherzustellen, dass es keinen Fokus erhält. (während sie noch fokussierbar sind und Fehlermeldungen erhalten).

Es gab eine offene PR, die dies behebt, aber ich denke, sie ist verloren gegangen, seit der andere Thread, auf den sie abzielte, geschlossen wurde. Siehe #2594

@jhedstrom würde das gerne zusammenführen. Wissen Sie, ob diese Bibliothek noch gepflegt wird?

Ich habe etwas Ähnliches wie die Lösung von @eloyesp oben verwendet und das hier geteilt:

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

Danke @jhedstrom, dass du mich in die richtige Richtung