2010-01-27 4 views
7

jQuery 및 jQuery UI를 사용하는 모달 주석 시스템에서 작업하고 있지만 포커스가있는 문제가 있습니다.jQuery UI 대화 상자 및 텍스트 영역 포커스 문제

<form action="/comments/add" class="addCommentForm" name="addCommentForm" method="post"> 
    <textarea name="content" class="addCommentContent"></textarea> 
    <button value="Add Comment" type="submit" class="commentPost"/> 
    <button value="Clear Comment" type="submit" id="clearComment"/> 
</form> 

문제 :

가 addCommentBox의 사업부의 내부
<div id="modal" title="Loading"> 
<div id="modalContent"></div> 

<div id="modalLogin"> 
    <div class="loginBox"></div> 
    <div class="addCommentBox"></div> 
    <div class="commentReview"></div> 
</div> 
</div> 

, 내가 코멘트 코드를 가지고 : 나는 로그인을 전환하고 코멘트를 추가, 아래로 모달 내부 div의 일련의이 대화 상자를 연 후 약 절반 시간이 addCommentBox div 안에있는 텍스트 영역은 선택시 키보드 입력에 반응하지 않습니다. 마우스가 제대로 작동하고 텍스트를 선택할 수 있지만 키보드 컨트롤은 아무 것도하지 않습니다.

나는 텍스트 영역에 이벤트 리스너가 없습니다. 나는 버튼을 가지고 있지만 버튼만을 목표로 삼고있다.

HTML에서 일어나는 유일한 사실은 내가 모달을 클릭 할 때마다 전체 모달 div에 대해 z- 색인이 증가한다는 것입니다. addCommentBox div가 Z- 인덱스 9999를 갖도록 설정했습니다. 모달의 Z- 인덱스보다 큽니다.

연구를위한 제안이나 지시 사항은 크게 감사하겠습니다. 감사!

+1

예를 들어 실패하십시오 : http://jsfiddle.net/ – Markus

+1

당신은 어떤 jQuery UI 버전, 어떤 jQuery 버전을 추가하고 싶습니다. – potatopeelings

+0

오버레이의 Z- 인덱스도 $ (".ui-widget-overlay")로 확인하는 것이 좋습니다. css ("z-index") – potatopeelings

답변

1

"반 시간"이 힘든 경우입니다. 다른 브라우저에서 테스트하여 같은 일이 발생하는지 확인하십시오.

0

어떻게 loginBox 및 commentReview를 숨기고 있습니까? 불투명도를 사용한다면 보지 못하는 부분이 텍스트 영역 위에 놓여있는 것일 수 있습니다.

불투명도가 0 인 요소는 표시되지 않지만 다른 모든 점에서는 여전히 존재합니다. 그들은 마우스 이벤트를 받아들이고 텍스트 영역을 클릭하는 것을 멈 춥니 다.

텍스트 영역을 볼 수 있다면 내게는 z- 인덱스 문제가 아닌 것 같습니다.

0

대화 상자를 열 때 "열기"기능을 사용하는 동안 텍스트 상자에 초점을 맞추십시오.

 
$('#modal').dialog({ 
    open: function() { 
     $('textarea[name=content]').focus(); 
    } 
}); 
0

소리가 문제는 페이지의 다른 것입니다. 위의 기능을 다른 모든 기능과는 별도의 페이지로 설정하여 테스트 해 보셨습니까?

0

설정되지 않은 경우 텍스트 영역의 TABINDEX 속성을 설정해보십시오.