javascript - Send inn jQuery UI-dialog ved <Enter>

Jeg har en jQuery UI-dialogboks med et skjema. Jeg ønsker å simulere et klikk på en av dialogboksens knapper, slik at du ikke trenger å bruke musen eller tabbe deg bort til den. Med andre ord, jeg vil at den skal oppføre seg som en vanlig GUI-dialogboks hvor det simulerer å trykke på "OK"-knappen.

Jeg antar at dette kan være et enkelt alternativ med dialogen, men jeg kan ikke finne det i jQuery UI-dokumentasjonen. Jeg kunne binde hver skjemaoppføring med keyup(), men visste ikke om det fantes en enklere/renere måte. Takk.

Svar #1

Jeg vet ikke om det finnes et alternativ i jQuery UI-widgeten, men du kan ganske enkelt binde keypress-hendelsen til div-en som inneholder dialogen din...

$('#DialogTag').keypress(function(e) {
    if (e.keyCode == $.ui.keyCode.ENTER) {
          //Close dialog and/or submit here...
    }
});

Dette vil kjøre uansett hvilket element som har fokus i dialogen din, noe som kan være enten bra eller dårlig avhengig av hva du ønsker.

Hvis du vil gjøre dette til standardfunksjonalitet, kan du legge til denne koden:

// jqueryui defaults
$.extend($.ui.dialog.prototype.options, { 
    create: function() {
        var $this = $(this);

        // focus first button and bind enter to it
        $this.parent().find('.ui-dialog-buttonpane button:first').focus();
        $this.keypress(function(e) {
            if( e.keyCode == $.ui.keyCode.ENTER ) {
                $this.parent().find('.ui-dialog-buttonpane button:first').click();
                return false;
            }
        });
    } 
});

Her er en mer detaljert oversikt over hvordan det ville se ut:

$( "#dialog-form" ).dialog({
  buttons: { … },
  open: function() {
    $("#dialog-form").keypress(function(e) {
      if (e.keyCode == $.ui.keyCode.ENTER) {
        $(this).parent().find("button:eq(0)").trigger("click");
      }
    });
  };
});

Svar #2

Jeg har oppsummert svarene ovenfor og lagt til viktige ting

$(document).delegate('.ui-dialog', 'keyup', function(e) {
        var target = e.target;
        var tagName = target.tagName.toLowerCase();

        tagName = (tagName === 'input' && target.type === 'button') 
          ? 'button' 
          : tagName;

        isClickableTag = tagName !== 'textarea' && 
          tagName !== 'select' && 
          tagName !== 'button';

        if (e.which === $.ui.keyCode.ENTER && isClickableTag) {
            $(this).find('.ui-dialog-buttonset button').eq(0).trigger('click');

            return false;
        }
    });

Fordeler:

  1. Ikke tillat enter-tasten på ikke-kompatible elementer som textarea, select, button eller input med type button, forestill deg at brukeren trykker enter på textarea og får skjemaet sendt inn i stedet for å få en ny linje!
  2. Bindingen gjøres én gang, unngå å bruke dialogens 'open'-callback for å binde enter-tasten for å unngå å binde den samme funksjonen om og om igjen hver gang dialogen åpnes
  3. Unngå å endre eksisterende kode som noen svar ovenfor foreslår
  4. Bruk 'delegate' i stedet for den avskrevne 'live' og unngå å bruke den nye 'on'-metoden for å kunne arbeide med eldre versjoner av jQuery
  5. Fordi vi bruker delegat, betyr det at koden over kan skrives selv før dialogen initialiseres. Du kan også plassere den i head-taggen selv uten $ (document).ready
  6. Også vil delegate bare koble én håndterer til document og vil ikke koble håndterer til hver dialog som i noe av koden ovenfor, for større effektivitet
  7. Fungerer selv med dynamisk genererte dialoger som $ ('<div><input type="text"/></div>').dialog({buttons: .});
  8. Fungerte med IE 7/8/9!
  9. Unngå å bruke den trege velgeren :first
  10. Unngå å bruke triks som i svarene her for å lage en skjult sendeknapp

Ulemper:

  1. Kjør den første knappen som standard, du kan velge en annen knapp med eq() eller kalle en funksjon inne i if-setningen
  2. Alle dialogene vil ha samme oppførsel, du kan filtrere det ved å gjøre velgeren din mer spesifikk, f.eks. '#dialog' i stedet for '.ui-dialog'

Jeg vet at spørsmålet er gammelt, men jeg har hatt det samme behovet, så jeg delte løsningen jeg har brukt.

Svar #3

$('#dialogBox').dialog('open');
$('.ui-dialog-buttonpane > button:last').focus();

Det fungerer vakkert med den nyeste versjonen av JQuery UI (1.8.1). Du kan også bruke :first i stedet for :last, avhengig av hvilken knapp du ønsker å sette som standard.

Denne løsningen, sammenlignet med den valgte ovenfor, har fordelen av å vise hvilken knapp som er standard for brukeren. Brukeren kan også TAB-e mellom knappene, og ved å trykke ENTER vil knappen som for øyeblikket har fokus bli klikket.

Skål.

Relaterte artikler