CODEWITHSUNDEEP
xpages
Lothar Mueller
Lothar Mueller

Reputation: 2528

Submit search on ENTER not working in IE

to perform a fulltext search users want to simply enter their query into a simple inputText. Then as soon as they hit ENTER the search itself should kick in.

Currently we tried to solve it like this:

This works fine in Firefox and Chrome but not in IE; obviously IE isn't recognizing the ENTER key as an onchange-trigger.

So I tried to record and analyze the keystrokes using the control's onkeyup event using something like

var q=sessionScope.get("myQuery");
return q.charCodeAt(q.length-1);

Works fine for all standard characters, but not for the ENTER key (where I would have expected to receive code 13).

I currently do have some kind of workaround using CSJS code in the control's onkeyup event as in:

if(event.keyCode===13){
    var p=location.pathname.split("/");
    p.pop();
    location.replace(p.join("/") + "/search.xsp");
}

But this has some side effects which has some potential to make things more complicated, and it feels a bit like some hack. So I'd prefer to solve it using server side scripting.

Question is:

Upvotes: 2

Views: 760

Answers (1)

Brian Gleeson - IBM
Brian Gleeson - IBM

Reputation: 2565

In IE the onchange event is not fired until the input loses focus: http://komlenic.com/231/internet-explorer-onchange-on-enter/

So you could use some CSJS to catch the ENTER press in IE, and drop focus from the input using .blur() method, which will in turn trigger the onchange event

A quick example I tried out that seems to work:

<xp:inputText id="inputText2" value="#{document1.text1}">
    <xp:eventHandler event="onkeyup" submit="false">
        <xp:this.script><![CDATA[
            var kc = thisEvent.keyCode?thisEvent.keyCode:"";
            if(kc != "" && kc == "13") {
                var input = dojo.byId("#{id:inputText2}");
                input.blur();
            }]]>
        </xp:this.script>
    </xp:eventHandler>
    <xp:eventHandler event="onchange" submit="true" refreshMode="complete">
        <xp:this.action>
            <xp:openPage name="/formInput.xsp"></xp:openPage>
        </xp:this.action>
    </xp:eventHandler>
</xp:inputText>

Upvotes: 5

Related Questions