Add unsupported events to an inputText

So today while looking for a solution to handling an HTML5 event of onSearch I came across this technique, which, probably isn't the best approach but does work. So, if you look at the client side events of an inputText field, you'll notice there isn't an event for onSearch. So, how do you add one? Well, you could of course go pass-thru html and just code the field as you would a Plain Jane HTML field. While this would work, to me it's just not taking advantage of the platform and wouldn't allow you to compute any of the other attributes.

So to address this issue we add an attribute to the field with a name of onsearch and then for the value, we write some SSJS that returns CSJS. I generally don't like doing this as it just feels dirty, but it does work in a bind. So to test this, here's the XSP markup for an inputText field using this technique.

<xp:inputText
    id="someField"
    value="#{document1.description}">
    <xp:this.attrs>
        <xp:this.attr
            name="onkeyup">
            <xp:this.value><![CDATA[#{javascript:return "alert('onkeyup fired');";}]]></xp:this.value>
        </xp:this.attr>
    </xp:this.attrs>
</xp:inputText>

Now when you put the cursor in the field and press a key and release it, you'll get the CSJS Alert box. Surprisingly this does work and I hope you can get some mileage out of it. Happy coding.

Share This: