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 싫다 .

이것은 가능한 은폐 솔루션으로 어떻습니까?

완벽하지는 않지만 실제로 다음 선택된 대화 상자에 포커스를 전달하여 원래 선택 항목이 표시되는 것을 중지하지만 아마도 또 다른 단계일 수 있습니다.

"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 "이나 그런 것이어야 합니까? 원인 v isibility: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 의 코드를 작동

좋은 소식은 @ghiculescu 의 새로운 기능이

@DASPriD @charettes 탭이 수정된 기능으로 작동하지 않는다는 것은 무엇을 의미합니까? 그것은 나를 위해 일하는 것 같습니다

tabindex: -1 을 @ghiculescu 의 스니펫에 선택하여 추가하면 탭 문제가 해결됩니다.

예: http://jsfiddle.net/hq7b426j/

나는 지금 문제를 볼 수 있었다! 귀하의 추가는 훌륭하게 작동합니다 @andreialecu

그런데 추가로 필요한 것이 하나 더 있었습니다. iPhone 또는 기타 지원되지 않는 장치에서는 바이올린이 제대로 작동하지 않습니다. Chosen은 iPhone에서 자신을 비활성화하고 <select> 변경하지 않고 그대로 둡니다. 위의 바이올린 코드는 이를 숨겨서 선택과 상호 작용할 방법이 없습니다.

이 바이올린은 그것을 수정합니다(디스플레이 추가: 없음 확인):
http://jsfiddle.net/hq7b426j/1/

아 그게 더 좋다!! 감사 해요! 저도 아직 테스트 중인데 다른게 나오면 글 올리겠습니다

@CaptainN 동일한 문제가 있다고 간략히 설명하십시오. wr 나는 그 코드를 넣어야합니다. wrapbootstrap에서 inspina 테마를 사용하고 있습니다.

@vidhyaprakash85 무슨 말인지 잘 모르겠습니다. 나는 오래 전에 포크했고 풀 리퀘스트(#900)를 작성했지만 저장소는 지금 동기화되지 않았고 내 포크는 매우 구식입니다. 도움이 된다면 여기에서 찾을 수 있습니다: 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 포함)에서

이 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 = !!옵션;

if (is_creating_chosen && select.css('위치') === '절대') {
// 선택 항목을 만들고 선택 항목에 이미 적절한 스타일이 추가된 경우
// 우리는 그것들을 제거하고(select가 미친 너비를 가지지 않도록), 그 다음 선택된 것을 생성합니다.
// 그런 다음 나중에 다시 추가합니다.
select.removeAttr('스타일');
}

var ret = select.oldChosen(옵션)

// 선택에 디스플레이가 있는 경우에만 작동: 없음, 그렇지 않으면 선택이 지원되지 않습니다(iPhone 등).
if (is_creating_chosen && select.css('디스플레이') === '없음') {
// 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('탭 인덱스', -2);

}
리턴 렛
}
`

+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 선택기는 잘못된 선택 요소를 대상으로 하며 그 중 하나가 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 에게 감사드립니다!