2009-04-21 36 views
5

Vấn đềjQuery UI Dialog + ASP.NET textbox + tập trung

Tôi đang sử dụng hộp thoại jQuery UI để hiển thị một hộp thoại với một số textbox ASP.NET và một nút trong đó. Tuy nhiên như jQuery di chuyển div cho hộp thoại bên ngoài hình thức tôi cần phải di chuyển nó trở lại hình thức bản thân mình (xem this để biết chi tiết lý do tại sao), do đó, ASP.NET vẫn hoạt động. Việc di chuyển này đang gây ra vấn đề, trong đó trường không lấy nét nếu được gọi.

Nếu bạn nhìn vào mẫu bên dưới dòng có nhãn Dòng B nên đặt trọng tâm, tuy nhiên dòng có gắn nhãn dòng A sẽ phá vỡ điều đó. Nếu tôi bình luận ra dòng A nó hoạt động. Bất kể tôi di chuyển đường B đến đâu (trước hộp thoại, dòng A, v.v ...) vẫn không đặt được tiêu điểm.

Bằng cách đặt tiêu điểm tôi có nghĩa là con trỏ nằm trong hộp văn bản nhấp nháy sẵn sàng để nhập.

Q uestion làm cách nào để đặt trọng tâm trong trường hợp này?

mẫu

mẫu body HTML

<body> 
<form id="form1" runat="server"> 
<div id="popup"> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /> 
    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
</div> 
</form> 
</body> 

jQuery mẫu

 $(document).ready(function() { 
     var dlg = $("#popup").dialog(); 
     /*Line A*/ dlg.parent().appendTo(jQuery("form:first")); 
     /*Line B*/ $("#TextBox2").focus(); 
    }); 
+0

Xem giải pháp của tôi để tránh tập trung nhảy trong Hộp thoại giao diện người dùng jQuery [http://stackoverflow.com/a/9428501/1230428](http://stackoverflow.com/a/9428501/1230428) Chúc may mắn – Roc

Trả lời

3

Nó hoạt động trong FF nhưng không phải trong IE7. Tôi đã tìm ra 2 công việc xung quanh. Nếu bạn không tham chiếu hộp văn bản theo tên nhưng theo vị trí hoặc vì một lý do nào đó nếu bạn đặt trọng tâm hai lần.

Đầu tiên:

$("input:text:second").focus(); 

Thứ hai:

$("#TextBox2").focus().focus(); 
1

bạn có thể cũng lớp hộp văn bản, như asp.net mangles id kiểm soát để tránh đặt tên xung đột.

$(".mytextbox").focus(); 

làm ví dụ .. điều này tất nhiên đánh bại mục đích ngữ nghĩa nhưng ngữ nghĩa không kết hợp tốt với biểu mẫu web.

4

Tôi nghĩ rằng vấn đề là bạn đang di chuyển cửa sổ bật lên và tập trung cuộc gọi trước khi hộp thoại được tạo hoàn toàn.

Hãy thử sử dụng sự kiện của hộp thoại open thay vì:

$(document).ready(function() { 
    $("#popup").dialog({ 
    open: function(){ 
     $(this).parent().appendTo(jQuery("form:first")); 
     $("#TextBox2").focus(); 
    } 
    }); 
}); 
+0

Điều này phù hợp với tôi ở Ubunutu Firefox 10.0.2 & IE 6 cho đến nay. Cảm ơn. –

7

Hãy thử sử dụng setTimeout("$('#TextBox2').focus();",100);, cho thoại và các phương thức của giao diện người dùng jQuery đôi khi nó mất vài giây để thực hiện các nhiệm vụ chúng ta gán theo mã.

Hy vọng điều này sẽ hữu ích. Cách giải quyết này đã giúp ích trong nhiều ứng dụng của tôi.

+1

Đã hoạt động nhưng phải tăng thời gian chờ lên 500. Thx – theschmitzer

Các vấn đề liên quan