2013-10-10 3 views
0

라디오 버튼과 관련 레이블이 for 인 라디오 버튼 그룹이 있고 레이블 중 하나에 텍스트 상자가 있습니다.
이제 텍스트 상자를 클릭하자마자 초점이 다시 제거되는 문제가 있습니다. HERE을 참조하십시오. - 입력 할 텍스트 상자를 선택하십시오.<label for><input /><label> - 포커스가 즉시 손실 됨

은 이미하여 onclick 또는 onfocus에서 다음 tryed :이 작동하는 것 같다

setInterval(function() { $('#TriggerTimeUI').focus(); }, 50) 

을하지만, 그 다음 모든 주심으로 그 제어에 datetimepicker하고있다 "죽이는"이 논리가 시간 (HERE을 참조하십시오.하지만이 바이올린은 Chrome에서만 작동합니다.) ...

누군가가 도와 줄 수 있습니까?

+0

왜 다른 요소의 라벨 안에 텍스트 상자가 있습니까? 레이블을 클릭하면 포커스가 'for'요소로 설정됩니다. – Barmar

+0

텍스트 상자는 "for"속성이있는 레이블 안에 있습니다. id가 "TriggerMode_custom"인 요소를 포커스하게 만들고 문서의 첫 번째 ID가 고려되어 라디오 버튼이 포커스됩니다. –

답변

1

레이블의 for 특성이 형제 요소로 설정되어 있기 때문에 문제가 발생했습니다. 즉, 속성에 명명 된 요소에서 click 이벤트가 발생하므로 텍스트 상자에서 포커스가 즉시 사라집니다. for 속성을 제거하고 텍스트 상자에 포커스 유지 :

<input type="radio" name="TriggerMode" id="TriggerMode_custom" value="custom" checked="checked" /> 
<label> <!-- remove the 'for' here --> 
    <input style="width: 230px;" type="Text" id="TriggerTimeUI" /> 
    <br /> 
</label> 

Example fiddle

누군가가 라디오 버튼을 선택 텍스트 상자에 클릭 할 때, 당신은 수동으로 할 필요가 있다는 그 동작을해야하는 경우 :

$('#TriggerTimeUI').focus(function() { 
    $('#TriggerMode_custom').prop('checked', true); 
}); 

Another example fiddle

+0

감사합니다. 두 번째 예제가 어떻게 작동했는지 ... – ChrFin

0

당신은 나 라벨 태그 아래에 입력 텍스트 상자를 포장했다 라디오 버튼을 길게합니다. 아래에서 시작하는 라벨 태그를 끝내면 문제가 발생합니다.

<label for="TriggerMode_custom"></label> 
     <input style="width: 230px;" type="Text" id="TriggerTimeUI" /><br /> 
관련 문제