Google Chrome: Tập trung vấn đề với thanh cuộn

Question

Tôi đang sử dụng jQuery 1.3.2.

Có trường nhập trong biểu mẫu. Nhấp vào trường nhập sẽ mở div dưới dạng menu thả xuống. Div chứa danh sách các mục. Khi kích thước danh sách lớn, có một thanh cuộn dọc trong div.

Để đóng menu thả xuống khi được nhấp vào bên ngoài, có sự kiện mờ trên trường nhập.

Bây giờ vấn đề là:

Trong chrome (2.0.172) khi chúng tôi nhấp vào thanh cuộn, trường nhập sẽ mất tiêu điểm. Và bây giờ nếu bạn nhấp vào bên ngoài, thì trình đơn thả xuống sẽ không đóng (vì đầu vào đã bị mất tiêu điểm khi bạn nhấp vào thanh cuộn)

Trong Firefox (3.5), IE (8), opera (9.64), safari() khi chúng ta nhấp vào thanh cuộn, trường nhập sẽ không mất nét. Do đó, khi bạn nhấp vào bên ngoài (sau khi nhấp vào thanh cuộn) thì trình đơn thả xuống sẽ đóng lại. Đây là hành vi mong đợi.

Vì vậy, trong chrome khi thanh cuộn được nhấp, và sau đó nếu tôi nhấp vào bên ngoài trình đơn thả xuống sẽ không đóng. Làm cách nào để khắc phục vấn đề này với chrome.

Answer 1

Trước đó tôi cũng phải đối mặt với tình huống như vậy và đây là những gì tôi đã làm.

$('html').click(function() { 
    hasFocus = 0; 
    hideResults(); 
}); 

và trên các lĩnh vực đầu vào tôi sẽ làm điều này

$('input').click() 
{ 
    event.stopPropagation(); 

} 

Vì vậy, đây sẽ đóng thả xuống nếu nhấp bất cứ nơi nào bên ngoài div (ngay cả những thanh cuộn). Nhưng tôi nghĩ nếu ai đó có thể cung cấp một giải pháp hợp lý hơn.

Answer 2

Bạn có thể đặt sự kiện mờ để kích hoạt div thả xuống không? Bằng cách này, khi một trong hai đầu vào hoặc thả xuống mất tập trung, nó sẽ biến mất ...

Answer 3

tôi tò mò ...
Bạn đang sử dụng phiên bản cuối cùng của mỗi trình duyệt, tại sao không bạn thử nó trong chrome 4.0.202?

Answer 4

Vâng, tôi đã gặp vấn đề tương tự trong kiểm soát thả xuống của mình. Tôi đã hỏi các nhà phát triển Chrome liên quan đến vấn đề này, họ nói rằng đó là a bug sẽ không được khắc phục trong tương lai gần nhất vì "nó chưa được nhiều người báo cáo và việc sửa chữa không phải là nhỏ". Vì vậy, chúng ta hãy đối mặt với sự thật: lỗi này sẽ ở lại thêm một năm nữa.

Mặc dù, đối với trường hợp cụ thể này (danh sách thả xuống), có một cách giải quyết khác. Bí quyết là: khi một cú nhấp chuột vào thanh cuộn, sự kiện "di chuột xuống" sẽ đến phần tử chủ sở hữu của thanh cuộn đó. Chúng ta có thể sử dụng thực tế này để thiết lập một cờ và kiểm tra nó trong trình xử lý "onblur". Ở đây giải thích:

<input id="search_ctrl"> 
<div id="dropdown_wrap" style="overflow:auto;max-height:30px"> 
    <div id="dropdown_rows"> 
    <span>row 1</span> 
    <span>row 2</span> 
    <span>row 2</span> 
    </div> 
</div> 

"dropdown_wrap" div sẽ nhận được thanh cuộn dọc vì nội dung của nó không vừa với chiều cao cố định. Khi chúng tôi nhận được nhấp chuột, chúng tôi chắc chắn rằng thanh cuộn đã được nhấp và tiêu điểm sẽ bị gỡ bỏ. Bây giờ một số mã như thế nào để xử lý này:

search_ctrl.onfocus = function() { 
    search_has_focus = true 
} 

search_ctrl.onblur = function() { 
    search_has_focus = false 
    if (!keep_focus) { 
    // hide dropdown 
    } else { 
    keep_focus = false; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onclick = function() { 
    if (isChrome()) { 
    keep_focus = search_has_focus; 
    } 
} 

Vậy là xong. Chúng tôi không cần bất kỳ hack cho FF vì vậy có một kiểm tra cho trình duyệt.Trong Chrome, chúng tôi phát hiện nhấp vào thanh cuộn, cho phép làm nổi bật tiêu điểm mà không đóng danh sách và sau đó khôi phục ngay tiêu điểm trở lại điều khiển đầu vào. Tất nhiên, nếu chúng ta có một số logic cho "search_ctrl.onfocus" nó cũng phải được sửa đổi. Lưu ý rằng chúng tôi cần kiểm tra xem search_ctrl có tập trung để ngăn chặn các sự cố với nhấp đúp không.

Bạn có thể đoán rằng ý tưởng tốt hơn có thể được hủy bỏ sự kiện onblur nhưng điều này sẽ không làm việc trong Chrome. Không chắc chắn nếu đây là lỗi hoặc tính năng.

P.S. "dropdown_wrap" không nên có bất kỳ phần đệm hoặc đường viền nào, nếu không người dùng có thể nhấp vào trong các khu vực này và chúng tôi sẽ coi đây là một nhấp chuột trên thanh cuộn.

Answer 5

thay vì phát hiện mờ, phát hiện các document.body hoặc cửa sổ nhấp chuột và lấy điểm chuột. xác định nếu điểm chuột này nằm ngoài hộp menu. mau, bạn đã phát hiện ra khi họ nhấp vào bên ngoài hộp!

Answer 6

tôi giải quyết điều này bằng cách làm như sau:

#my_container là container trong đó có các "overflow: auto" quy tắc CSS

$('#my_container') 
    .mouseenter(function(){ 
    // alert('ctr in!'); 
    mouse_in_container = true; 
    }) 

    .mouseleave(function(){ 
    // alert('ctr out!'); 
    mouse_in_container = false; 
    }); 

Và sau đó:

$('input').blur(function(){ 
    if(mouse_in_container) 
    return; 
    ... Normal code for blur event ... 
}); 

Khi tôi chọn một phần tử trong danh sách thả xuống, tôi viết lại các mã như:

 (>> ADDED THIS) mouse_in_container=false; 
     $('input').attr('active', false); // to blur input 
     $('#my_container').hide(); 

Answer 7

tôi đã phải đối mặt với tình huống tương tự/vấn đề và tôi đã thử nghiệm giải pháp từ "ihsoft" nhưng nó có một số vấn đề. Vì vậy, tôi đã làm việc trên một thay thế cho điều đó và thực hiện chỉ là một trong những tương tự như "ihsoft" nhưng một trong đó hoạt động. đây là giải pháp của tôi:

var hide_dropdownlist=true; 

search_ctrl.onblur = function() { 

    search_has_focus = false 
    if (hide_dropdownlist) { 
    // hide dropdown 
    } else { 
    hide_dropdownlist = true; 
    search_ctrl.focus(); 
    } 
} 

dropdow_wrap.onmouseover = function() { 
    hide_dropdownlist=false; 
} 
dropdow_wrap.onmouseoout = function() { 
    hide_dropdownlist=true; 
} 

Tôi hy vọng điều này sẽ giúp ai đó.

Answer 8

tôi không thể có được những câu trả lời để làm việc, có lẽ vì họ là từ năm 2009. Tôi chỉ giải quyết điều này, tôi nghĩ ihsoft là đi đúng hướng nhưng một chút nặng tay.

Với hai chức năng

onMouseDown() { 
    lastClickWasDropdown=true; 
} 
onBlur() { 
    if (lastClickWasDropdown) { 
     lastClickWasDropdown = false; 
     box.focus(); 
    } else { 
     box.close(); 
    } 
} 

Bí quyết là ở cách bạn liên kết các yếu tố. Sự kiện onMouseDown sẽ nằm trên div "container" chứa tất cả mọi thứ sẽ được nhấp (tức là, hộp văn bản, mũi tên thả xuống và hộp thả xuống cùng thanh cuộn của nó). Sự kiện Blur (hoặc trong jQuery sự kiện tập trung) nên được ràng buộc trực tiếp vào hộp văn bản.

Tested và các công trình!