Problemi con eventi jQuery .blur () e .focus ()

Question

Ho un modulo con alcuni campi di input. Quando un utente fa clic su un campo di input, viene visualizzato un div nascosto con alcune selezioni per quel campo, quindi può scegliere un'opzione e impostare questo come valore del campo.

Attualmente, il modo in cui il div viene nascosto è quando l'utente seleziona un'opzione. Funziona bene, ma se un utente non desidera selezionare un'opzione, il div non verrà rimosso. Quindi, la mia soluzione era quella di utilizzare un evento di sfocatura sui campi di input, che nascondesse il loro elemento div. In questo modo, un utente può scorrere il modulo, vedere il div nascosto e nasconderlo quando lasciano quel campo. Funziona anche correttamente.

Il problema sorge quando ora vogliono fare clic su qualcosa dal div per essere inseriti nell'input. Poiché ho aggiunto anche una sfocatura, che si attiva anche quando l'utente sta cercando di fare clic su un'opzione nel div, nascondendo effettivamente il div un secondo prima che l'utente faccia clic, quindi non aggiungendo nulla al campo di input.

Quale sarebbe il modo migliore per risolvere questo problema? Vorrei avere l'evento sfocatura per nascondere il div, ma ci deve essere una sorta di eccezione quando l'utente vuole fare clic all'interno del div, che l'evento sfocatura non nasconderà il div in cui stanno cercando di fare clic.

Grazie per l'aiuto.

Answer 1

Puoi impostare un timeout sull'evento di sfocatura e nascondere la "guida div" " immediatamente solo quando è attivo un altro campo di input.

Qualcosa del genere:

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

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

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

// etc...

Potresti ovviamente renderlo più generico e potrebbe usare un po 'di messa a punto, ma hai l'idea ...

Answer 2

Onblur, imposta un timeout che attende un secondo prima di disattivare il div corrispondente. Quindi, fai clic su, cancella il timeout. Ecco un esempio di base ...

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

Vorrei aggiungere un pulsante di chiusura con un punto di tabulazione immediatamente dopo quel campo. Ciò risolverebbe il problema di un utente che non conosce il segreto (facendo scorrere le schede) probabilmente non rendendosi conto che esiste un modo per chiudere la finestra di dialogo senza scegliere un'opzione.

Answer 4

Usa l'evento mousedown, che si innesca quando l'utente fa clic sull'elemento helper ma prima che l'evento sfocatura venga attivato sull'elemento input.

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

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