Lavorare su un controllo HTML che funziona più o meno come un foglio di calcolo, con una matrice di celle di dati modificabili. Quando si tratta di celle derivate da una SELECT, sto riscontrando un problema nel comportamento corretto quando quel tipo di cella è selezionato per la modifica:Ignorare il comportamento SELECT del tasto Invio
Se eseguo il rendering utilizzando la sua formattazione predefinita (dimensione = 0), l'utente ottiene il comportamento out-of-luogo di trasformazione Enter-chiave del Select:
- primo Invio => attiva la modifica sulla cella (mostra la selezionare di controllo)
- seconda Invio => si espande Seleziona per mostrare the Options
- l'utente effettua la selezione utilizzando up/dn chiavi
- 3rd Invio => chiude la lista. (Problema: questo Enter è nascosto dal gestore eventi "keydown")
- 4th Invio => necessario per attivare il listener di eventi per la disattivazione della modifica della cella.
D'altra parte, se la selezione è reso come una casella di riepilogo (ad esempio, size = 3, per esempio) Invio comportamento chiave è esattamente quello che sto cercando (significato, # 2 e # 3 nell'elenco precedente non sono più necessari), ma poiché l'elenco viene ora visualizzato internamente al controllo (anziché come popup) fa esplodere il dimensionamento di celle/righe.
Quindi, c'è un modo per "agganciarsi" al terzo evento Enter-key sopra, o qualche altro modo relativamente diretto per alterare il comportamento di Select quando si tratta di elaborare il tasto Invio?
NOTA: non stiamo usando qualsiasi libreria 3rd party (leggi:. JQuery, et al)
EDIT: qui è il listener di eventi (in allegato tramite "addEventListener (...)" tipico
this.e_sKeyDown = function(control, event) {
switch(event.keyCode) {
case 13: // enter
control.blur()
break
case 27: // esc = reset selection to it previous value
control.setAttribute("data-cancelModify", "true")
control.blur()
break
}
}
2 ° EDIT: per commenti/suggerimenti, ho aggiunto/dato questa prova:.
this.e_sOnChange = function(control, event) {
control.blur()
}
questo evento sarà il fuoco, ma spara per ciascuno dei diversi Option/s In altre parole, esso doesn sembra che lo avrò qualsiasi modo per determinare se questa è l'opzione che l'utente in realtà intende per la selezione, o solo uno che è stato attraversato lungo la strada. Per dimostrare, ecco un esempio per il sito di jquery. Si noti come il testo cambia con ogni su/giù, a prescindere di Enter-chiave:
RISOLTO: grazie a tutti i commentatori per i loro suggerimenti. In effetti, la soluzione (per la mia situazione comunque) era aggiungere un ascoltatore di eventi "keyup" nel mix. Non posso dire su quali browser funzionerà, ma è funzionale nelle versioni successive di Chrome.
3rd enter => 'onchange', forse? –
Perché il terzo è nascosto dal gestore 'keydown'? –
onChange ... grazie, ci penserò. Justin: Non ne ho idea, tutto quello che posso dire è che l'evento non si innesca quando Select è nel suo stato espanso. Pubblicherò il gestore di eventi. – mjk