Hộp thoại giao diện người dùng jQuery và vấn đề tiêu điểm Textarea

Question

Tôi đang làm việc trên một hệ thống nhận xét phương thức bằng cách sử dụng jQuery và jQuery UI, nhưng tôi đang gặp một số vấn đề với tiêu điểm. Tôi có một loạt các divs bên trong phương thức để chuyển đổi giữa nhập và Thêm bình luận, như sau:

<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> 

Bên trong của div addCommentBox, tôi đã có mã bình luận:

<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> 

Vấn đề này là khoảng một nửa thời gian sau khi mở hộp thoại, vùng văn bản bên trong số addCommentBox div không phản ứng với đầu vào bàn phím khi được chọn. Chuột hoạt động chính xác và sẽ cho phép văn bản được chọn, nhưng điều khiển bàn phím không làm gì cả.

Tôi không có người nghe sự kiện nào trên vùng văn bản. Tôi đã có một số trên các nút, nhưng họ đang nhắm mục tiêu chỉ các nút.

Điều duy nhất xảy ra trong HTML có vẻ là một thực tế là mỗi khi tôi nhấp vào phương thức, chỉ số z tăng cho div phương thức tổng thể. Tôi đã đặt div addCommentBox để có chỉ mục z là 9999, lớn hơn chỉ số z của phương thức.

Mọi đề xuất hoặc chỉ dẫn để nghiên cứu sẽ được đánh giá cao. Cảm ơn!

Answer 1

Nếu nó xảy ra "một nửa thời gian" đó là một khó khăn. Kiểm tra nó trên một số trình duyệt khác để xem điều tương tự có xảy ra hay không.

Answer 2

Bạn ẩn mã đăng nhập và nhận xétReview như thế nào? Nếu bạn đang sử dụng độ mờ có thể là thứ mà bạn không thể nhìn thấy đang nằm trên đầu trang của vùng văn bản.

Bạn sẽ không thấy các phần tử có độ mờ là 0, nhưng chúng vẫn còn ở mọi khía cạnh khác. Họ sẽ chấp nhận các sự kiện chuột, ngăn bạn nhấp vào vùng văn bản.

Nếu bạn có thể nhìn thấy vùng văn bản, thì nó không có vẻ giống như vấn đề z-index đối với tôi.

Answer 3

Khi mở hộp thoại, hãy thử lấy nét hộp văn bản trong khi đang mở chức năng "mở".

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

Answer 4

Có vẻ như sự cố xảy ra với nội dung khác trên trang. Bạn đã thử nghiệm điều này bằng cách đặt các tính năng trên nó là trang riêng biệt với tất cả các chức năng khác?

Answer 5

Thử đặt thuộc tính TABINDEX của vùng văn bản nếu nó chưa được đặt.