열린 상태에서 레이블을 클릭하면 jQuery datepicker가 열렸습니다.

Question

jQuery UI Datepicker 플러그인을 사용하고 플러그 인이 열려 있고 사용자가 datepicker가 바인딩 된 필드에 포커스를 설정하는 레이블 요소를 클릭하면, blur 이벤트가 발생하여 datepicker가 사라집니다. 이것은 일시적으로 포커스 이벤트에 뒤따라 datepicker를 다시 페이드합니다. 그러나 blur 이벤트가 다시 발생하면 입력 필드가 포커스를 잃을 때 datepicker 대화 상자가 열린 상태로 유지됩니다.

내 태그는 매우 기본적인 :

<label>Select date <input type="text" id="datepicker" /></label> 
<script type="text/javascript">$('#datepicker').datepicker(options);</script> 

내가 콘솔에서 다음을 입력하여 the jQuery UI Datepicker page에 오류를 재현 다음 날짜 선택기가 열리면

$('h2:first').html('<label for="datepicker">Datepicker</label>'); 

, 제목을 클릭하십시오.

datepickers에 대한 라벨을 제거 할 수 있으며 애니메이션을 사용 중지해도 도움이 될 수 있지만 이러한 기능이 제공하는 사용자 경험을 유지하고 싶습니다. 누구든지이 문제를 해결하는 방법에 대한 영감으로 나를 도울 수 있습니까?

Answer 1

나는 당신과 똑같은 문제를 겪고있었습니다. (실제로 당신의 질문은 내 인터넷 검색 중에 나타났습니다).

나는이 문제가 당신이 사용하고있는 jQueryUI의 버전과 @ ShadowScripter의 jsFiddle에서 보여 졌다고 믿는다. v1.8.17 및 v1.8.18을 사용하여이 문제가 발생했지만 jsFiddle은 v1.8.16을 사용합니다 (버그가 재현되지 않음). v1.8.18을 사용하여 버그를 재연하는 jsFiddle이 있습니다.

그래서 나는 16 절에 대해 18 절을 diffed 교환하는 몇 가지 코드를했고, 범인을 발견 : Datepicker.prototype._hideDatepicker에서

, postProcess()는 다음과 같이 정의된다 :

v1.8.18 :

var self = this; 
var postProcess = function() { 
    $.datepicker._tidyDialog(inst); 
    self._curInst = null; 
}; 

을

v1.8.16

var postProcess = function() { 
    $.datepicker._tidyDialog(inst); 
    this._curInst = null; 
}; 

datepicker이 열린 상태에서 label을 클릭하면 v.16에있는 this이 postProcess()에 있고, v에있는 동안 HTMLDivElement 개체입니다.도 18에서, self은 Datepicker 개체이다. _curInst은 Datepicker의 속성이므로 v.16의 코드는 _curInst을 잘못된 객체 (Datepicker 대신 HTMLDivElement)에 할당합니다. 이 실수는 v.18에서 수정되었지만 "stuck open"버그가 발생했습니다.

v18에서 self._curInst = null;을 단순히 삭제하면 "열린 상태"버그가 수정됩니다. 나는 이것이 어떤 부작용이 있을지는 모르겠지만 결과가 다를 수 있지만 초기 테스트 중에 어떤 문제도 알지 못했습니다.

Answer 2

흠, 문제가 재현되지 않는 것 같습니다.
this JSFiddle에서 시도해도 입력에 포커스가 계속 남아 있습니다.
어쨌든 레이블에 대한 올바른 html 마크 업은 레이블 내에 전체 입력을 포함하지 않습니다.
그게 for 속성입니다.

대신

<label for="datepicker">Select date</label><input type="text" id="datepicker" /> 

가 여기에 label attribute for

확율이에 대한 몇 가지 정보가있어이 작업을 수행, 방해 자신의 코드 중 일부가있을 수 있습니다. 예를 들어 return 문을 어딘가에 사용하면 해당 특정 요소에 대한 전파가 중지됩니다. 자세한 내용은 here을 참조하십시오.

Answer 3

Jquery UI v1.8.19에서 수정되었습니다.