jQuery UI Dialogschaltfläche Fokus

Wenn ein jQuery UI-Dialogfeld geöffnet wird, wählt es eine der Schaltflächen aus und hebt sie hervor oder setzt den Fokus darauf etc ... Wie kann ich dieses Verhalten stoppen, sodass keine der Schaltflächen im Dialogfeld hervorgehoben wird öffnet?jQuery UI Dialogschaltfläche Fokus

EDIT: Ich habe versucht, die folgenden in den Dialogoptionen, die nicht den Fokus von den Tasten entfernt hat:

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

HINWEIS: Als vorübergehende Lösung ich die CSS für .ui-state-focus geändert, aber diese ist nicht ideal ...

Quelle

2009-11-24 davidsleeps

Siehe http://dev.jqueryui.com/ticket/4731. Eine Option wird hinzugefügt, um dies in 1.9 konfigurierbar zu machen. – cope360

Siehe http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox für Details des Codes, der das verursacht. – cope360

[Siehe meine Lösung Springen Fokus auf jQuery UI-Dialog zu verhindern] [1] [1]: http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting -focus-to-first-textbox/9428501 # 9428501 – Roc

Verwenden Sie die Weichzeichnungsmethode. Sie können dieses Beispiel ausprobieren.

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

Quelle

2010-02-03 20:15:20

Perfekte Lösung, danke Ed! Das hat mich immer genervt. – Mfoo

ich das gleiche Problem hatte ... Den Versuch, den Fokus auf ein anderes Element zu setzen schien nicht für mich, den Trick zu tun, sondern den Fokus von dem ausgewählten Elemente Verwischung (in dem „offenen“ Rückruf) tat :

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

nehme ich einen Weg Fokus zu verhindern, ohne einen bestimmten Namen einen Selektor mit einem ersten, wie diese zu verwenden, würde die Angabe sein:

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

Quelle

2011-01-08 13:04:28 Lev

Ich benutzte @Ed Saitos Code innerhalb der 'open:' Option Funktion und es funktionierte gut. Beispiel: 'open: function() {$ (". Ui-dialog: button "). Blur(); } – JustinP8

Es ist klar Fokus der jQuery Dialog verursacht t blättern o interessante Bereiche beim Öffnen. Es wird jetzt fast überall referenziert.

Unschärfe funktioniert, aber nicht, wenn Sie eine Menge Inhalt haben. Wenn sich die Schaltfläche am unteren Rand des Inhalts befindet, wird durch Unschärfe die Auswahl entfernt, der Dialog wird jedoch nach unten verschoben. Mit scrollTop scrollte der Inhalt nach oben, ließ aber die Schaltfläche ausgewählt. Wenn ein Benutzer versehentlich die Eingabetaste drückt, wird die Schaltfläche oder der Link ausgelöst. Ich entschied mich für eine Kombination:

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

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

    } 
});

wie ein Weltmeister arbeitete ...

Quelle

2011-01-28 19:28:01

Dank für Antworten, aber es scheint mir, dass die beste Lösung (zumindest für mich, minimal-Code und keine unnötige Verwendung von Methoden auf dem DOM) ist der Dialog-Schaltflächen in einem Array von Objekt zu definieren:

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")} 
     }]

der wichtige Teil Ihrer Tasten zu verhindern Fokus zu erhalten ist: tabIntex: -1

Es ist auch eine bequeme und lesbare Möglichkeit, Ihren Tasten IDs zu geben.

Quelle

2012-12-03 07:08:27 Aureltime

Keine gute Idee. Dies unterbricht die Barrierefreiheit - es deaktiviert die Verwendung der Tabulatortaste, um durch die ui zu navigieren. – Vroo

Wenn Sie Bedenken hinsichtlich der Barrierefreiheit haben (wie @Vroo erwähnt), ist diese Antwort immer noch gültig, wenn nur die Schaltfläche vorhanden ist und der Dialog geschlossen wird. Auf diese Weise kann der Benutzer einfach den Escape-Schlüssel verwenden, um ihn zu schließen. Stellen Sie sicher, dass Sie die 'closeOnEscape' -Eigenschaft als' true' definieren. – Mike

Dies ist, was ich in der Regel tun, funktioniert die ganze Zeit:

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

Quelle

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'); 
     } 
    } 
]

Dies ist die einzige Art, wie ich es Arbeit bekam. tabIndex: -1 ist die Lösung.

Oh, und ich wollte mich auf den zweiten Button konzentrieren, also mein "Delete Item?" Die Bestätigung würde den Artikel standardmäßig nicht löschen.

Quelle

2013-02-26 08:56:32 Niklaus

Oder einfach nur eine Dummy-Eingabe vor dem Aufruf der anderen Tasten erstellen funktioniert genauso gut. Dies funktioniert, weil die Benutzeroberfläche einfach nach der ersten "Eingabe" als Standard sucht. Indem Sie die Benutzeroberfläche dazu bringen, zuerst eine falsche Eingabe zu sehen, wird der Fokus umgeleitet.

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

Quelle

2013-09-29 16:20:21 Mgfranz

Ich stolperte über einen kleinen Hack, um das zu beheben, das andere nützlich finden könnten. Eine Lösung wie diese scheint für mich zu arbeiten:

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

Es einfach programmatisch setzt sie erneut überprüft, die den Fokus Frage zu klären scheint.

Quelle

2015-02-13 21:16:50 poleguy

Nun, alle Lösungen scheinen hier mit Code oder Hacks zu gehen. Also werde ich meins posten, das nur in CSS-Override basiert. Was mich störte, war der Umriss, die die Schaltfläche Look als „ausgewählt“, so dass ich es einfach mit overrided „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; 
}

Sie können auch jeden anderen Stil hinzufügen/überschreiben, die Sie stört :)

Quelle

2015-03-06 09:51:39

Base auf ED und Lev Antworten, bekam ich diese gute Lösung:

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

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

Quelle

2015-08-11 16:34:52 Justin

ich die Antwort weiß bereits ausgewählt wurde, aber es gibt eine einfache HTML-Lösung, die ich hier vor langer Zeit gefunden.

Fügen Sie den folgenden Code als erstes Element in das DIV ein, das Sie als Ihr Dialogfeld festlegen.

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

Quelle

2017-06-16 15:31:37

Wie ist das hilfreich? Welche Zugänglichkeitsfunktionalität bietet dies? –

Fügen Sie einfach diese Zeile die Autofokus-Funktionalität zu entfernen:

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

Sie es in einer Datei geteilt Javascript hinzufügen und es wird Autofokus aller Ihrer Dialoge verhindern! Kein Kopieren und Einfügen mehr in alle Dialoge

Quelle

2017-07-21 17:54:35 joalcego

jQuery UI Dialogschaltfläche Fokus

Antwort

Verwandte Themen