Wicket key event -> get key!

Question

Hi guys, one more question: I created an inputfield and added an AjaxFormComponentUpdatingBehavior ("onkeyup"). Now I want to execute some code only if the right key (space-key) is pressed. How am I able to get the last pressed key? I thought it would be stored in the target attribute but I couldn't find it there... Is there any easy way to solve this problem?

Thx guys! CU Sylvus

Answer 1

You should not use an AjaxFormComponentUpdatingBehavior if you want to capture keys. This behavior is reserved for actions that update the form component model. I would probably try to do it in javascript alone, especially if you are using a javascript framework like mootools or prototype. Here is some sample code for mootools (no need to send this to the server):

    this.add(new TextField<String>("textField").add(new AbstractBehavior(){

        private static final long serialVersionUID = 1L;
        private Component component;

        @Override
        public void bind(final Component component){
            this.component = component.setOutputMarkupId(true);
        }

        @Override
        public void renderHead(final IHeaderResponse response){
            response.renderOnDomReadyJavascript(
                "$('" + this.component.getMarkupId() + "')" +
                    ".addEvent('keyup',function(event){" +
                        "if(' '==event.key){" +
                            "alert('you pressed space!!!')" +
                        "}" +
                    "}" +
                ");");
        };

    }));

if no js library is available, here's a wicket-only solution:

        @Override
        public void renderHead(final IHeaderResponse response){
            response.renderJavascriptReference(WicketEventReference.INSTANCE);
            response.renderOnDomReadyJavascript("Wicket.Event.add('"
                + this.component.getMarkupId()
                + "',onkeyup',function(event){" + "if(' '==event.key){"
                + "alert('you pressed space!!!')" + "}" + "}" + ");");
        };

but this does not deal with cross-browser issues in event handling

Answer 2

Hi, I think I need a little more help :) First of all: I'm not using mootools or prototype so I tryed your second piece of code! Also it is just a demo version so cross browser issues are allowed ^^

Now to the code - I tryed the following:

searchInput.add(new AbstractBehavior() {
     @Override
     public void renderHead(final IHeaderResponse response) {
    response.renderJavascriptReference(WicketEventReference.INSTANCE);
    response.renderOnDomReadyJavascript("Wicket.Event.add('" +  
        searchInput.getMarkupId() + "',onkeyup',function(event){"
         + "if(' '==event.key){" + "alert('you pressed space!!!')" + "}" + "}" + ");");
    };
});

But it's not working. Any ideas? Also I don't want to give a message via "alert" :) Is there a way to reload some code with AJAX? Thx for your time, if you don't know why it is not working, I can paste some more code :)

Bye bye (no INet over the weekend)...

Answer 3

All right :) But now I have the solution (thx to you, google and firebug!):

        searchInput.add(new AbstractBehavior() {

            private static final long   serialVersionUID    = 1L;
            private Component           component;

            @Override
            public void bind(final Component component) {
                this.component = component.setOutputMarkupId(true);
            }

            @Override
            public void renderHead(final IHeaderResponse response) {
                response.renderJavascriptReference(WicketEventReference.INSTANCE);
                response.renderOnDomReadyJavascript("document.getElementById('" + this.component.getMarkupId() + "').onkeyup=function(event){\n"
                        + "if(32==event.keyCode){\n" + "alert('you pressed space!!!')" + "\n}" + "}");
            }

        });

Thank you! And sorry for my last post...