2013-01-21 13 views
5

ho questa nel mio file html:rispondere immediatamente ai cambiamenti textarea in Dart

<textarea id="inputbox" placeholder="type here"></textarea> 

Qual è il modo corretto per cablare un gestore che il fuoco immediatamente ogni volta che il contenuto delle modifiche textarea? (Sia da tastiera, mouse/appunti, input vocale, lettore di onde cerebrali, ecc)

ho provato:

query("#inputbox").on.change.add(handler) 

ma (almeno su Dartium) è solo incendi dopo aver scheda fuori dal campo.

Lo scopo è aggiornare una finestra di "anteprima dal vivo", simile al modo in cui Stackoverflow esegue il rendering di Markdown durante la digitazione.

risposta

8

Questo è il migliore che ho trovato finora. Sarei felice di sapere se qualcuno sa di un'alternativa più compatta o preferibile.

Modifica: snippet di codice aggiornato allo new pattern per la registrazione degli eventi.

import 'dart:html'; 

void main() { 
    query("#inputbox") 
    ..onChange.listen(handler) 
    ..onKeyDown.listen(handler) 
    ..onKeyUp.listen(handler) 
    ..onCut.listen(handler) 
    ..onPaste.listen(handler); 
} 

void handler(Event event) { 
    print((query("#inputbox") as TextAreaElement).value); 
} 

Il comportamento precisa varierà tra i browser e sistemi operativi.

potete saltare keyDown, ma essere consapevoli keyDown e keyUp comportamento è influenzato dal sistema operativo e isn't guaranteed to be symmetric. Potresti probabilmente perdere un cambiamento, almeno fino al prossimo keyUp o modificare l'evento. Effettivamente ho provato questo creando una piccola app su Windows 7 per inviare un messaggio WM_KEYDOWN orfano a Dartium e IE9.

keyPress potrebbe essere utilizzato al posto di keyUp e keyDown, ma won't generate events per alcuni tasti come backspace e cancellare.

cut e paste reagire immediatamente a un taglio o incolla eseguito con il mouse. Se non li usi, l'evento change acquisirà la modifica, ma non prima che il campo non perda lo stato attivo o sometimes even later.

L'evento input potrebbe sostituire tutti i listener sopra e sembra funzionare perfettamente in Dartium, ma in IE9 acquisisce solo aggiunte di caratteri, non di rimozioni.

Nota keyUp e keyDown possono generare eventi indesiderati aggiuntivi per i tasti cursore, home, end, shift, ecc. (Ad es. In IE9). Si spara oltre ai listener taglia/incolla quando l'utente utilizza i tasti di scelta rapida per tali azioni.

Mentre la domanda è specifica di Dart, molte delle discussioni precedenti si applicano a qualsiasi codice che ascolta il DOM. Anche keyCode valori aren't standardized attraverso i browser (more detail).

Può anche essere utile verificare la classe KeyboardEventController, anche se in generale quando l'ho testato il comportamento del caso limite era simile a quello indicato sopra. Potrebbe essere o non essere di progettazione.Gli sviluppatori di Dart fanno un certo sforzo a insulate you da incoerenze tra browser, ma è ancora in corso.

anche mentre stiamo parlando di textarea, ricordatevi di usare la sua proprietà value, not its text property. Infine, assicurati che il tuo handler limiti le sue reazioni alle "esplosioni" dell'attività della tastiera (ad esempio una sorta di timer che rimanda brevemente le viscere del tuo gestore e arrotola eventuali eventi aggiuntivi che si verificano nel frattempo).

domande correlati e link:

2

Non è chiaro se si sta usando polimero o no, ma se lo si è, è possibile sottoscrivere una modifica a una variabile annotata con @osservabile creando una funzione nell'elemento polimerico nella forma come [nome variabile] Modificato (oldvalue). Originariamente l'ho trovato qui: How to subscribe to change of an observable field

Problemi correlati