Valeur instantanée de changement de gestionnaire sur une GWT zone de texte

Je voudrais mettre à jour un champ de texte instantanément lors de la saisie dans une GWT zone de texte. Mon problème est que ValueChangeEvent et ChangeEvent gestionnaires déclenche uniquement lorsque la zone de texte perd le focus. J'ai pensé à utiliser l'événement keypressevent mais ensuite rien ne se passe lorsque vous effectuez un copier-coller avec la souris.

Quelle est la façon la plus simple de le faire ?

InformationsquelleAutor Jla | 2010-07-06
  1. 33

    Vous pourriez attraper la ONPASTE événement et manuellement feu un ValueChangeEvent. Quelque chose comme ceci:

    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;
        }
    }
}

    Testé sur firefox 3.6.1.

    • Merci. Cela a fonctionné pour moi. Une chose pour les autres à noter est que le report de la commande est nécessaire parce que la zone de texte ne contient pas encore le texte de l'intérêt lorsque la pâte événement est pris en charge. Si vous essayez de filtrer le contenu de la zone de texte (dans mon cas, pour les caractères valides), note qu'un utilisateur momentanément voir le texte collé. Quelqu'un sait tout des façons de contourner cela? De ce que j'ai lu, FF ne permet pas de presse-papiers de l'inspection, mais les deux Webkit et IE faire?
    • Ce que vous pourriez faire est de cacher le contenu de la TextBox jusqu'à la validation se fait. C'est vraiment un hack mais color: transparent ferait l'affaire...
    • Est-ce possible de le faire sans l'extension TextArea et à l'aide de UiBinder?
    • J'en doute puisque vous en quelque sorte besoin d'étendre le comportement dans onBrowserEvent().
    • Grande réponse, mais dans les versions récentes de GWT, DeferredCommand a été dépréciée en faveur de Planificateur.get().scheduleDeferred(...)
    • Merci Renato. Édité ma réponse.
    • Au lieu de l'extension de la zone de texte, vous pouvez simplement utiliser JSNI comme ici: stackoverflow.com/a/4018317/193016

    InformationsquelleAutor z00bs
  2. 2

    Comme une solution générale, ce qui fonctionne pour moi (merci à gal-bracha commentaire):

    Généralement, GWT n'ayant pas de classes pour gérer les événement d'entrée (décrit ici
    et ici). Nous avons donc besoin de la mettre en œuvre par nous-mêmes:

    Classe de gestionnaire:

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

public interface InputHandler extends EventHandler {

  void onInput(InputEvent event);

}

    Classe d'événement:

    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);
    }

}

    Utilisation:

    box.addDomHandler(new InputHandler() {

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

    Il fonctionne sur tous les TextBox de changement de valeur, y compris le collage à l'aide du menu contextuel. Il ne réagit pas sur les flèches, la touche ctrl, maj, etc...

    • Manque "(" après la nouvelle de Type<InputHandler>.
    • Fixe, thx @Alicia
    • J'ai cette erreur lors de la création de ce qui suit: 2 (String) : tentative de lavabo inconnu type d'événement d'entrée
    • Excellente réponse! Merci
    InformationsquelleAutor zolv
  3. 1

    Cela a été un problème majeur pour moi dans le passé. Le keyupHandler pas travailler parce que le copier coller nécessite une deuxième touche appuyez sur l'option coller qui ne déclenche pas l'événement. le meilleur que j'ai pu faire est d'utiliser l'ancien changelistener pas l'idéal, mais ça fonctionne.

    • Aussi, le copier-coller peut être fait avec la souris.
    • Mieux utiliser l'entrée de l'événement, Mais je ne suis pas sûr de savoir comment y accéder à partir de gwt. Il gère aussi bien les coller, et le clavier, car il augmente lorsque la valeur change réellement. developer.mozilla.org/en/DOM/DOM_event_reference/input
    InformationsquelleAutor mosherj8StackOverFlow
  4. 0

    Pourquoi ne pas utiliser la combinaison de deux KeyUpHandler et une fonction changehandler sur la zone de texte?
    Doit prendre soin de rétroaction immédiate sur chaque frappe de touche ainsi que des copier coller cas.

    • Comme je l'ai dit la fonction changehandler ne se déclenche une fois la zone de texte perd le focus, mais je voudrais mettre à jour mon champ instantanément (alors que l'utilisateur tape).
    • Hmmm... Avez-vous trouver un moyen? Veuillez actions de la solution lorsque vous faites 🙂 Merci
    • Le changement de comportement sur la perte de l'accent a été accepté, après tout, l'application que je travaillais. Donc, je n'ai jamais trouvé une solution et laissé de coté pour le moment. Mais mettra à jour la question si jamais je en trouver un.
    • La meilleure chose est d'utiliser l'entrée de l'événement, Mais je ne suis pas sûr de savoir comment y accéder à partir de gwt. Il gère aussi bien les coller, et le clavier, car il augmente lorsque la valeur change réellement. developer.mozilla.org/en/DOM/DOM_event_reference/input
    InformationsquelleAutor Ashwin Prabhu
  5. 0
    Just saw this question. Because I was facing the similar problem.

    Fait un peu de bidouille et il a travaillé pour moi.
    Vous pouvez utiliser KeyUpHandler, mais l'utiliser avec d'autres si le bloc qui vérifie
    pour la longueur de la zone de texte. Si la longueur de la zone de texte est > 0, faire ton truc.
    Ex:

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

    }
    }
    • Cela ne prend pas en compte pour le déplacement des valeurs dans la boîte, déclenche aussi sur gauche/droite keyrelease, ctrl keyrelease
    • vrai, ce sera applicable pour la saisie de texte. Je suppose que ça va servir le but de cette question. C'est juste un hack 😉
    InformationsquelleAutor Bikas Katwal
  6. 0

    Je préfère utiliser Elements que Widgets donc ce ma façon de gestionnaire.

        Element input = Document.get().getElementById("my-input");
    DOM.sinkBitlessEvent(input, "input");
    DOM.setEventListener(input, event -> GWT.log("Event!"));
    InformationsquelleAutor Daniel De León