Chosen: поддержка обязательных атрибутов html5?

@Aharito Разве мы не

Спасибо @Aharito, он отлично работает с выбранной версией v1.1.0, просто замените $('select.chzn') на $('.chosen-select') .

Я подумал, что попробовал этот трюк с clip: 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 нет .

как насчет этого как возможного решения прикрытия.

он не идеален, но на самом деле он предотвращает появление исходного выбора, передавая фокус следующему выбранному диалоговому окну, но, возможно, это еще один шаг ближе

«selected-select» - это просто селектор для выбранных мной элементов с определенным классом, я не уверен, охватывает ли «фокус щелчка» все соответствующие события, на которые я должен подключиться, но, может быть, кто-нибудь может сказать, чего еще не хватает?

также возможно, что я неправильно понял что-то в выбранной структуре html и обнаружил ("a") слишком либеральным, у кого-нибудь есть больше опыта?

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

ох, и обязательно " display: visible " должен быть " display: block " или что-то в этом роде? причина видимость: видимый действителен, но дисплей: видимый, я уверен, что нет

я обнаружил, что если у вас есть несколько элементов выбора рядом друг с другом в одном и том же контейнере, это перемещает их все в неправильное место, поэтому 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");
    });
});

Я думаю, что это лучшая версия, которая у меня есть. К счастью, это решает проблему перехода вперед, все еще существует обратное табуляция, вы не можете переходить назад через selected-select, потому что, когда вы переходите в элемент select, вы сразу же снова переключаетесь на выбранный контейнер, что означает, что вы ' re попал в ловушку только для того, чтобы перейти вперед.

Это может быть идея отслеживать предыдущий элемент, и если элемент, который ранее имел фокус табуляции, находился перед текущим сфокусированным элементом, вы идете назад, затем соответствующим образом пропустите перефокусировку на выбранный и выберите предыдущую вкладку, но я не знаю, как это сделать.

После очень долгого чтения я подумал, что попробовал предложения, представленные на протяжении многих лет.

К сожалению, я не смог заставить работать код от @christhomas . Я вызываю его в функции отправки без видимых результатов (также без ошибок).

Хорошие новости: новая функция от @ghiculescu работает как удовольствие, поскольку я все еще могу использовать выбранный файл CDN и просто использовать функцию в моем файле js.

@DASPRiD @charettes, что вы имеете в виду, вкладка не работает с измененной функцией? Кажется, у меня работает

Достаточно просто добавить tabindex: -1 к фрагменту select to @ghiculescu , решив проблему табуляции.

Пример: http://jsfiddle.net/hq7b426j/

Теперь я видел проблему! Ваше дополнение отлично работает @andreialecu

Между прочим, требовалось еще одно дополнение. На iPhone или других неподдерживаемых устройствах скрипка не работает должным образом. Chosen отключается на iPhone и оставляет <select> без изменений, а код в скрипте выше скроет его, не оставляя возможности взаимодействовать с выбранным элементом.

Эта скрипка исправляет это (добавляя проверку display: none):
http://jsfiddle.net/hq7b426j/1/

Ах, это даже лучше !! Спасибо! Я все еще тестирую, но опубликую, если что-нибудь еще появится

@CaptainN, расскажите, пожалуйста, у меня

@ vidhyaprakash85 Я не понимаю, что вы имеете в виду. Я сделал форк довольно давно и написал запрос на перенос (# 900), но репозитории сейчас не синхронизированы, а мой форк очень устарел. Вы можете найти его здесь, если это поможет: https://github.com/adcSTUDIO/chosen

я уже использую https://github.com/harvesthq/chosen, как это сделать :(

@andreialecu ваш код отлично работает! Благодарность!!!

Спасибо @christhomas, ваш код отлично поработал: dancer:

Ни @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 = function (options) {
var select = $ (это),
is_creating_chosen = !! варианты;

if (is_creating_chosen && select.css ('position') === 'absolute') {
// если мы создаем selected, а в select уже добавлены соответствующие стили
// мы удаляем их (чтобы выделенная область не имела сумасшедшей ширины), затем создаем выбранную
// затем мы повторно добавляем их позже
select.removeAttr ('стиль');
}

var ret = select.oldChosen (параметры)

// действовать только в том случае, если для выбора есть display: none, иначе выбранный вариант не поддерживается (iPhone и т. д.)
if (is_creating_chosen && select.css ('display') === 'none') {
// https://github.com/harvesthq/chosen/issues/515#issuecomment -33214050
// делаем это только в том случае, если мы инициализируем selected (без параметров или параметров объекта), а не вызываем метод

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

}
возвратиться
}
`

+1

Может ли кто-нибудь исправить это? Это довольно старая проблема и очень важная функциональность в настоящее время. Спасибо.

Не работает в последней версии.

Кажется, это нарушает проверку формы angular.js при использовании angular-selected.

Сейчас 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;
}

Если вы используете 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

Вот мой обходной путь, если он нужен:

// 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, чтобы убедиться, что он не получает фокус. (при этом все еще можно фокусировать и получать сообщения об ошибках).

Был открытый PR, который решает эту проблему, но я думаю, что он потерялся, так как другой поток, на который он нацелен, был закрыт. См. № 2594

@jhedstrom хотел бы, чтобы это слилось. Вы знаете, поддерживается ли эта библиотека?

Я использовал что-то похожее на решение @eloyesp выше и поделился этим здесь:

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

Спасибо @jhedstrom за то, что указал мне в правильном направлении!