Probleme mit jQuery .blur () und .focus () Veranstaltungen

Question

Ich habe ein Formular mit einigen Eingabefeldern. Wenn ein Benutzer klickt auf einem Eingabefeld, eine versteckte div für das Feld mit einiger Auswahl erscheint, kann sie dann eine Option, und diesen Satz als Feldwert auswählen.

Derzeit ist die Art und Weise des div versteckt wird, wenn der Benutzer eine Option auswählt. Dies funktioniert gut, aber was ist, wenn ein Benutzer nicht will, um eine Option wählen, wird das div nicht entfernt werden. So, das war meine Lösung eine Unschärfe Ereignis auf die Eingabefelder zu verwenden, die ihre div Element verstecken würde. Auf diese Weise könnte ein Benutzer Tab durch die Form, die versteckten div zu sehen, und versteckt es, wenn sie das Feld verlassen. Dies funktioniert korrekt als gut.

Das Problem entsteht, wenn sie jetzt wollen etwas aus dem div in den Eingang gefüllt werden klicken. Weil ich eine Unschärfe selbst, dass auch Brände hinzugefügt, wenn der Benutzer versucht, eine Option in der div klicken, effektiv den div eine leichte Sekunde, bevor der Benutzer klickt versteckt, dafür ist das Hinzufügen nichts in das Eingabefeld.

Was wäre der beste Weg, um dieses Problem zu lösen? Ich möchte die Unschärfe Ereignis haben die div zu verstecken, aber es muss eine Art von Ausnahme sein, wenn der Benutzer innerhalb des div klicken, dass die Unschärfe Ereignis nicht das div verbergen, dass sie versuchen, in klicken.

Danke für die Hilfe.

Answer 1

Sie könnten ein Timeout auf dem Blur-Ereignisse gesetzt und die „Hilfe div“ sofort nur verstecken, wenn ein anderes Eingabefeld im Fokus ist.

So etwas wie folgt aus:

$("#input1").focus(function() { 
      hideAllHelpers(); $("#helper1").show(); 
});

$("#input1").blur(function() { 
      window.setTimeout(function() { $("#helper1").hide(); },2000); });
});

$("#input2").focus(function() { 
      hideAllHelpers(); $("#helper2").show(); 
});

// etc...

Sie könnten natürlich machen diese allgemeineren und es könnte etwas Feinabstimmung verwenden, aber Sie bekommen die Idee ...

Answer 2

Onblur, stellen einen Timeout, das die entsprechende div eine Sekunde vor hidding wartet. Dann Onclick, deaktivieren Sie das Timeout. Hier ist ein einfaches Beispiel ...

// Namespace for timer
var myPage = {
  timer: null
}

// Blur event for textbox
.blur(function() {
  myPage.timer = setTimeout(function() { 
    // Hide the div
  }, 1000);
});

// Click event for DIV
.click(function() {
  clearTimeout(myPage.timer);
  // Fill in the textbox
  $(this).hide();
});

Answer 3

würde ich nach diesem Feld stoppt sofort eine Schließen-Schaltfläche mit einem Tab hinzuzufügen setzen. Dies würde das Problem eines Benutzers zu lösen, die das Geheimnis nicht kennt (Tabbing durch) möglicherweise nicht realisieren es eine Möglichkeit ist, den Dialog ohne Auswahl einer Option zu schließen.

Answer 4

Mit dem mousedown- Ereignisse, das ausgelöst wird, wenn der Benutzer klickt auf die Helfer Element, aber bevor die Unschärfe Ereignis auf dem Eingangselement ausgelöst wird.

$('#input').blur(function () {
  $('#helper').hide();
});

$('#helper').mousedown(function () {
  console.log('This executed before the blur event');
});