Controlador de cambio de valor instantáneo en un cuadro de texto GWT

Question

Me gustaría actualizar un campo de texto al instante al escribir en un cuadro de texto GWT. Mi problema es que los manejadores ValueChangeEvent y ChangeEvent solo se activan cuando el TextBox pierde el foco. Pensé en usar KeyPressEvent pero luego no pasaría nada al realizar una copia pegar con el mouse.

¿Cuál es la forma más sencilla de hacerlo?

Answer 1

Puede ver el evento ONPASTE y disparar manualmente un ValueChangeEvent. Algo como esto:

public void onModuleLoad() { 
    final Label text = new Label(); 
    final ExtendedTextBox box = new ExtendedTextBox(); 
    box.addValueChangeHandler(new ValueChangeHandler<String>() { 

     @Override 
     public void onValueChange(ValueChangeEvent<String> event) { 
      text.setText(event.getValue()); 
     } 

    }); 
    box.addKeyUpHandler(new KeyUpHandler() { 

     @Override 
     public void onKeyUp(KeyUpEvent event) { 
      text.setText(box.getText()); 
     } 
    }); 

    RootPanel.get().add(box); 
    RootPanel.get().add(text); 
} 

private class ExtendedTextBox extends TextBox { 

    public ExtendedTextBox() { 
     super(); 
     sinkEvents(Event.ONPASTE); 
    } 

    @Override 
    public void onBrowserEvent(Event event) { 
     super.onBrowserEvent(event); 
     switch (DOM.eventGetType(event)) { 
      case Event.ONPASTE: 
       Scheduler.get().scheduleDeferred(new ScheduledCommand() { 

        @Override 
        public void execute() { 
         ValueChangeEvent.fire(ExtendedTextBox.this, getText()); 
        } 

       }); 
       break; 
     } 
    } 
} 

Probado en firefox 3.6.1.

Answer 2

¿Por qué no utilizar la combinación de KeyUpHandler y ChangeHandler en el TextBox? Debe encargarse de recibir comentarios inmediatos sobre cada pulsación de tecla y también copiar el caso de pegar.

Answer 3

Esto ha sido un problema importante para mí en el pasado. KeyupHandler no funcionará porque copiar y pegar requiere una segunda pulsación de tecla en la opción pegar que no desencadena el evento. lo mejor que he podido hacer es utilizar el antiguo changelistener no ideal, pero funciona.

Answer 4

Just saw this question. Because I was facing the similar problem. 

Hice algunos hack y funcionó para mí. Puede usar KeyUpHandler pero usarlo con un bloque adicional que compruebe para la longitud del cuadro de texto. Si la longitud del cuadro de texto es> 0, haga lo suyo. Ex:

textBox.addKeyUpHandler(new KeyUpHandler() { 
    @Override 
    public void onKeyUp(KeyUpEvent keyUpEvent) { 
    if (textBox.getText().length() > 0) { 
    //do your stuff`enter code here` 

    } 
    } 

Answer 5

como una solución general, lo que funciona para mí (gracias a Gal-berajá comentario):

En general, GWT no tiene clases para manejar evento de entrada (que se describe here y here) . Así que tenemos que ponerlo en práctica por nosotros mismos:

clase

Handler: Clase

import com.google.gwt.event.shared.EventHandler; 

public interface InputHandler extends EventHandler { 

    void onInput(InputEvent event); 

} 

Evento:

import com.google.gwt.event.dom.client.DomEvent; 

public class InputEvent extends DomEvent<InputHandler> { 

    private static final Type<InputHandler> TYPE = new Type<InputHandler>("input", new InputEvent()); 

    public static Type<InputHandler> getType() { 
     return TYPE; 
    } 

    protected InputEvent() { 
    } 

    @Override 
    public final Type<InputHandler> getAssociatedType() { 
     return TYPE; 
    } 

    @Override 
    protected void dispatch(InputHandler handler) { 
     handler.onInput(this); 
    } 

} 

Uso:

box.addDomHandler(new InputHandler() { 

    @Override 
    public void onInput(InputEvent event) { 
     text.setText(box.getText()); 
    } 
},InputEvent.getType()); 

Funciona en cada cambio de valor de cuadro de texto que incluye pegar usando el menú contextual. No reacciona con flechas, ctrl, shift, etc ...