Chosen: html5 مطلوب دعم السمة؟

Aharito ألن نواجه مشكلة ترتيب علامات التبويب من خلال تنفيذ هذا؟

شكرًا Aharito ، إنه يعمل بشكل رائع مع استبدل $('select.chzn') بـ $('.chosen-select') .

اعتقدت أنني جربت هذا المقطع: خدعة مستقيمة ، ووجدت مشكلة في ذلك. ربما مع متصفح أقدم؟ أعتقد إذا كان العمل الآن رائعًا.

أعتقد أنه قد تكون هناك مشكلات في علامة التبويب مع الحل الخاص بي أيضًا (لا أتذكر ، لقد مرت فترة) - لقد قللت التأثير من خلال تطبيق التصحيح فقط على الحقول التي تشكل السمة المطلوبة.

لقد قمنا بتوحيد هذا عبر جميع المكالمات إلى $().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 هذا لا يحل مشكلة tabbing أو shift-tabbing في التحديد ، أليس كذلك؟

DASPRiD كلا .

ماذا عن هذا كحل محتمل للتستر.

إنه ليس مثاليًا ، ولكنه في الواقع يمنع التحديد الأصلي من الظهور عن طريق تمرير التركيز إلى مربع الحوار المحدد التالي ، ولكن ربما يكون خطوة أخرى أقرب

"selected-select" هو مجرد محدد للاختيارات التي أجريها مع فئة معينة ، ولست متأكدًا مما إذا كان "تركيز النقر" يغطي جميع الأحداث ذات الصلة التي يجب أن أعلقها ، ولكن ربما يمكن لشخص ما أن يقول ما هو مفقود أيضًا؟

من الممكن أيضًا أنني أساءت فهم شيء ما حول بنية html المختارة ووجدت أن ("أ") ليبرالية للغاية ، هل من أحد لديه المزيد من الخبرة؟

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

أوه، وبالتأكيد " عرض: مرئية " يجب أن يكون " عرض: كتلة " أو شيء من هذا؟ السبب v isibility: المرئي صالح ، لكن العرض: مرئي أنا متأكد من أنه ليس كذلك

ما وجدته هو أنه إذا كان لديك عدة اختيارات بجانب بعضها البعض في نفس الحاوية ، فإن هذا يزيحهم جميعًا في الموقع الخطأ وبالتالي فإن الموضع: مطلق ثم يجعل رسالة التحقق من الصحة تظهر في الموضع الخطأ.

لقد قمت بحل هذا عن طريق فصل وإعادة توصيل الحاوية المختارة ، على هذا النحو

$(".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 للعمل. أقوم باستدعائها ضمن وظيفة إرسال بدون نتائج مرئية (لا توجد أخطاء أيضًا).

الخبر السار هو أن الوظيفة الجديدة من قبل ghiculescu تعمل مثل علاج حيث لا يزال بإمكاني استخدام ملف CDN المختار واستخدام الوظيفة في ملف js الخاص بي.

charettesDASPRiD ما هل التبويب يعني لا يعمل مع وظيفة تعديل؟ يبدو أن العمل بالنسبة لي

سهل بما يكفي لإضافة tabindex: -1 إلى select toghiculescu 's snippet ، حل مشكلة tabbing.

مثال: http://jsfiddle.net/hq7b426j/

أستطيع أن أرى المشكلة الآن! إضافة الخاص بك تعمل بشكل رائع andreialecu

كانت هناك إضافة أخرى مطلوبة بالمناسبة. على iPhone أو الأجهزة الأخرى غير المدعومة ، لن يعمل الكمان بشكل صحيح. تم اختياره لتعطيل نفسه على iPhone وترك <select> تغيير ، وسيخفيه الكود الموجود في العداد أعلاه ، ولا يترك أي طريقة للتفاعل مع التحديد.

يعمل هذا الكمان على إصلاحه (عن طريق إضافة عرض: لا شيء):
http://jsfiddle.net/hq7b426j/1/

آه هذا أفضل !! شكرا! ما زلت أختبر أيضًا ، لكنني سأقوم بالنشر إذا ظهر أي شيء آخر

CaptainN يرجى إيجاز لدي نفس المشكلة. wr أحتاج إلى وضع هذا الرمز. أنا أستخدم سمة inspina من التفاف بوتستراب.

@ vidhyaprakash85 لست متأكدًا مما https://github.com/adcSTUDIO/chosen

أنا أستخدم بالفعل https://github.com/harvesthq/chosen كيفية القيام بذلك :(

andreialecu كودك يعمل بشكل جيد! شكرا!!!

شكرًا christhomas لقد نجحت التعليمات البرمجية بشكل رائع: راقصة:

لاchristhomas أوghiculescu عملت بالنسبة لي باستخدام متعددة مجمعة تحديد. تركه للتحقق من صحة الخادم في الوقت الحالي.

عندما جربت التصحيح ghiculescu ،
عندما جربت التصحيح christhomas ، ظهرت

اضطررت إلى تعديل البرنامج النصي ghiculescu حتى يمكنني الاتصال مرتين على هذا النحو:

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

خلافًا لذلك ، أزلت الرحلة الثانية النمط الذي تمت إضافته في الأولى:

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

doganmeh يعمل بشكل رائع في Chrome والجوال (مع Chrome) ولكن تم اختباره في Firefox 53.0 حيث لا يعمل

حتى هذا http://jsfiddle.net/hq7b426j/1/ لا يعمل في Firefox 53.0

حسنًا ، ولكن هذا يبدو أشبه بمشكلة في 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 حدد = $ (هذا) ،
is_creating_chosen = !! خيارات ؛

إذا (is_creating_chosen && select.css ('موضع') === 'مطلق') {
// إذا كنا بصدد إنشاء مجموعة مختارة وتم بالفعل إضافة الأنماط المناسبة إلى التحديد
// نقوم بإزالة هؤلاء (بحيث لا يحتوي التحديد على عرض مجنون) ، ثم نقوم بإنشاء الملف المختار
// ثم نعيد إضافتها لاحقًا
select.removeAttr ("النمط") ؛
}

var ret = select.oldChosen (خيارات)

// التصرف فقط إذا تم عرض التحديد: لا شيء ، وإلا فإن الاختيار غير مدعوم (iPhone ، إلخ)
إذا (is_creating_chosen && select.css ('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// افعل هذا فقط إذا كنا نبدأ (بدون معلمات أو معلمات كائن) لا نستدعي طريقة

  $(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.js عند استخدام اختيار الزاوية الزاوية أيضًا.

إنه 2018 وما زلنا نواجه نفس المشكلة. إنه لأمر جحيم كيف لا تعمل معايير HTML بشكل صحيح ومتكاملة مع المكونات الإضافية الخارجية. أوقات مجنونة :)

هذا يكسر المكون الإضافي الذي اختاره دروبال أيضًا. انظر 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;
}

إذا كنت تستخدم Chosen لجميع عناصر select ، يمكنك استخدام CSS لتغييرها وجعلها مرئية (لـ DOM) ، لكن بدون عتامة ، لا ارتفاع ، موضع مطلق.

تستهدف محددات CSS هذه عناصر تحديد غير صالحة ، حيث يستهدف أحدها 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://jsfiddle.net/tripflex/2zdeu9oc/

ولكن في الحقيقة ... يجب أن يتم التعامل مع هذا بالفعل بواسطة Chosen.JS lib

هذا هو الحل الخاص بي ، إذا كان مفيدًا:

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

لا يتعامل مع إجراء "التدمير" ، ولكنه يضع رسالة الخطأ بشكل جيد ويبدو أنه يعمل على Firefox و Chromiun. نظرًا لأن المحدد الأصلي غير مخفي ، فإن حد تمييز الخطأ يكون مرئيًا. تحديث : مع max-height يعمل أيضًا على IE. تحديث آخر : أضف tabindex -1 للتأكد من أنه لا يتلقى التركيز. (مع الاستمرار في التركيز وتلقي رسائل الخطأ).

كان هناك علاقات عامة مفتوحة لحل هذه المشكلة ، لكنني أعتقد أنها ضاعت منذ إغلاق الخيط الآخر الذي استهدفه. انظر # 2594

سيحبjhedstrom رؤية ذلك مدمجًا. هل تعرف ما إذا كانت هذه المكتبة لا تزال قيد الصيانة؟

لقد استخدمت شيئًا مشابهًا لحلeloyesp أعلاه

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

شكرا jhedstrom لتوجيهي في الاتجاه الصحيح!