Hộp thoại nút giao diện người dùng jQuery

Khi hộp thoại Giao diện người dùng jQuery mở ra, nó chọn một trong các nút và đánh dấu nó hoặc đặt trọng tâm vào nó vv ... Làm cách nào để ngăn chặn hành vi này sao cho không có nút nào được đánh dấu khi hộp thoại mở ra?Hộp thoại nút giao diện người dùng jQuery

EDIT: Tôi đã thử các sau đây trong các tùy chọn hộp thoại, trong đó không loại bỏ tập trung từ các nút:

... 
open:function(event, ui) { $("myunimportantdiv").focus(); }, 
...

LƯU Ý: Là một workaround tạm thời tôi sửa đổi CSS cho .ui-state-focus nhưng điều này không phải là lý tưởng ...

Nguồn

2009-11-24 davidsleeps

Xem http://dev.jqueryui.com/ticket/4731. Một tùy chọn sẽ được thêm vào để thực hiện cấu hình này trong 1,9. – cope360

Xem http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox để biết chi tiết về mã gây ra lỗi này. – cope360

[Xem giải pháp của tôi để ngăn chặn nhảy tập trung vào jQuery UI Dialog] [1] [1]: http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting -focus-to-first-textbox/9428501 # 9428501 – Roc

Sử dụng phương pháp làm mờ. Bạn có thể thử mẫu này.

<html> 
    <head> 
     <title>No Focus on jQuery Dialog</title> 
     <link type="text/css" rel="stylesheet" href="ui.all.css" /> 
     <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
     <script type="text/javascript" src="ui.core.js"></script> 
     <script type="text/javascript" src="ui.dialog.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       // Dialog to confirm or cancel 
       // Focuses on confirm by default. 
       $('#noFocusDialog').dialog({ 
        autoOpen: false, 
        buttons: { 
         Confirm: function() { 
          $(this).dialog('close'); 
         }, 
         Cancel: function() { 
          $(this).dialog('close'); 
         } 
        } 
       }); 

       // Trigger to open the dialog 
       $('#openNoFocusDialog').click(function() { 
        $('#noFocusDialog').dialog('open'); 

        // Remove focus on all buttons within the 
        // div with class ui-dialog 
        $('.ui-dialog :button').blur(); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <a id="openNoFocusDialog" href="#">Open Dialog</a> 
     <div id="noFocusDialog"> 
      <p>Confirm that no elements have focus</p> 
     </div> 
    </body> 
</html>

Nguồn

2010-02-03 20:15:20

Giải pháp hoàn hảo, cảm ơn bạn Ed! Điều này luôn làm tôi khó chịu. – Mfoo

Tôi đã gặp vấn đề tương tự ... Việc cố gắng đặt tiêu điểm thành phần tử khác dường như không thực hiện mẹo cho tôi, nhưng làm mờ nét từ phần tử đã chọn (trong gọi lại "mở") :

$('#dialog').dialog 
    ({ 
    open: function() 
     { 
     $('#element-that-gets-selected').blur(); 
     } 
    });

tôi cho rằng một cách để ngăn chặn tập trung mà không chỉ định một tên cụ thể sẽ được sử dụng một selector với đầu tiên, như thế này:

$('#dialog').dialog 
    ({ 
    open: function() 
     { 
     $(this).find('select, input, textarea').first().blur(); 
     } 
    });

Nguồn

2011-01-08 13:04:28 Lev

Tôi thực sự đã sử dụng mã của @Ed Saito bên trong chức năng của tùy chọn 'mở:' và nó hoạt động tốt. Giống như: 'open: function() {$ (". Ui-dialog: button "). Blur(); } – JustinP8

Nó tập trung rõ ràng đang gây ra jQuery Dialog để di chuyển t o các khu vực thú vị khi mở. Nó được tham chiếu gần như mọi nơi.

làm mờ, nhưng không phải nếu bạn có nhiều nội dung. nếu nút ở dưới cùng của nội dung, làm mờ sẽ xóa lựa chọn, nhưng để hộp thoại cuộn xuống dưới cùng. bằng cách sử dụng scrollTop đã cuộn nội dung lên trên cùng, nhưng để lại nút được chọn. Nếu người dùng vô tình nhấn phím trả về, nút hoặc liên kết sẽ kích hoạt. Tôi đã chọn một sự kết hợp:

$('#dialog').dialog({ 
    open: function (event, ui){ 

     $('a_selector').blur(); 
     $(this).scrollTop(0); 

    } 
});

làm việc như một nhà vô địch ...

Nguồn

2011-01-28 19:28:01

nhờ cho câu trả lời, nhưng có vẻ như với tôi rằng giải pháp tốt nhất (ít nhất là đối với tôi, mã tối thiểu và không sử dụng không cần thiết của phương pháp trên DOM) là định nghĩa các nút thoại của bạn trong một loạt các đối tượng:

buttons: [{ 
      id : "button1", 
      text : "Button1 text", 
      title : "tooltip1text1", 
      tabIndex: -1, 
      click : clickCallback 
     },{ 
      id  : "button2", 
      text : "Button2 text", 
      title : "tooltip1text2", 
      tabIndex: -1, 
      click : function(){$(this).dialog("close")} 
     }]

phần quan trọng để ngăn chặn các nút của bạn để có được tập trung là: tabIntex: -1

Nó cũng là một cách thuận tiện và dễ đọc để cung cấp id cho các nút của bạn.

Nguồn

2012-12-03 07:08:27 Aureltime

Không phải là một ý tưởng hay. Điều này phá vỡ khả năng truy cập - nó vô hiệu hóa bằng cách sử dụng phím tab để điều hướng ui. – Vroo

Nếu bạn lo lắng về khả năng truy cập (như @Vroo đề cập) câu trả lời này vẫn hợp lệ nếu chỉ có nút và nó đóng hộp thoại. Bằng cách này, người dùng chỉ có thể sử dụng phím thoát để đóng nó. Chỉ cần chắc chắn để lại thuộc tính 'closeOnEscape' là' true'. – Mike

Đây là những gì tôi thường làm, làm việc tất cả các thời gian:

open: function() { 
    $('.ui-dialog button').removeClass('ui-state-focus'); 
},

Nguồn

2013-02-07 10:20:49 silkfire

buttons: [ 
    { 
     tabIndex: -1, 
     text: 'Yes', 
     click: function(){ 
      DeleteStuff(); 
      $(this).dialog('close'); 
     } 
    }, 
    { 
     text: 'No', 
     click: function(){ 
      // Don't delete 
      $(this).dialog('close'); 
     } 
    } 
]

Đây là cách duy nhất tôi nhận nó làm việc. tabIndex: -1 là giải pháp.

Ồ, và tôi muốn tập trung vào nút thứ hai, vì vậy "Mục Xóa của tôi?" xác nhận theo mặc định sẽ không xóa mục.

Nguồn

2013-02-26 08:56:32 Niklaus

Hoặc, chỉ cần tạo đầu vào giả trước khi gọi các nút khác cũng hoạt động. Điều này làm việc bởi vì giao diện người dùng chỉ đơn giản tìm kiếm "đầu vào" đầu tiên làm mặc định, bằng cách lừa giao diện người dùng nhìn thấy đầu vào sai trước, tiêu điểm được chuyển hướng.

<div id="dialog-confirm" title="Warning!"> 
<input type='text' size='0' style='position:relative;top:-500px;' /> 
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 0 0 0;"></span> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 
amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo.</p> 
</div>

Nguồn

2013-09-29 16:20:21 Mgfranz

Tôi tình cờ gặp một chút hack để khắc phục điều này mà người khác có thể thấy hữu ích. Một giải pháp như thế này dường như làm việc cho tôi:

$("#button").click(function() {         
    // this is a hack to prevent the focus from remaining after a click 
    $(this).toggle(this.checked);          
});

Nó chỉ đơn giản lập trình đặt nó kiểm tra một lần nữa, mà dường như làm sáng tỏ vấn đề trọng tâm.

Nguồn

2015-02-13 21:16:50 poleguy

Vâng, tất cả các giải pháp ở đây dường như đi kèm với mã hoặc hack. Vì vậy, tôi sẽ đăng bài của tôi, đó chỉ là dựa trên CSS override. Có gì làm phiền tôi là đề cương khiến nút nhìn như "được chọn", vì vậy tôi chỉ đơn giản là overrided nó với "none":

.ui-dialog .ui-dialog-titlebar button.ui-button:focus, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-focus, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-active, 
.ui-dialog .ui-dialog-titlebar button.ui-button.ui-state-hover { 
    outline:none; 
}

Bạn cũng có thể thêm/ghi đè lên bất kỳ kiểu nào khác đang làm phiền bạn :)

Nguồn

2015-03-06 09:51:39

Căn cứ vào ED và câu trả lời Lev, tôi có giải pháp tốt này:

jQuery("#testDialog").dialog({ 
     height: 280, 
     width: 400, 

     open: function() {    
      jQuery(this).closest(".ui-dialog").find(":button").blur(); 
     } 
    });

Nguồn

2015-08-11 16:34:52 Justin

tôi biết câu trả lời đã được chọn, nhưng có một giải pháp HTML đơn giản mà tôi tìm thấy ở đây một thời gian dài trước đây.

Thêm mã sau làm phần tử đầu tiên bên trong DIV mà bạn chỉ định làm hộp thoại của mình.

<span class="ui-helper-hidden-accessible"><input type="text" /></span>

Nguồn

2017-06-16 15:31:37

Điều này hữu ích như thế nào? Tính năng trợ năng nào cung cấp chức năng này? –

Chỉ cần thêm dòng này để loại bỏ các chức năng tự động lấy nét:

$.ui.dialog.prototype._focusTabbable = function(){};

Bạn có thể thêm nó vào một tập tin chia sẻ javascript và nó sẽ ngăn chặn tự động lấy nét của tất cả các hộp thoại của bạn! Không còn sao chép và dán trong tất cả các hộp thoại của bạn

Nguồn

2017-07-21 17:54:35 joalcego

Hộp thoại nút giao diện người dùng jQuery

Trả lời

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