Search code examples
javascriptdom-eventsrecaptchacappuccinoobjective-j

Cappuccino: Keyboard events getting squashed in reCAPTCHA input field


I'm integrating a reCAPTCHA into my Cappuccino app and I have it all working besides this odd input functionality in the reCAPTCHA input text field: Only some keys seem to work, "qwrszcv" and a few other letters work fine, but most other keys don't work.

I borrowed some of the mapkit code to inject the reCAPTCHA script file in the head, then I inject the reCAPTCHA div into a custom CPView class I made.

Here is my constructor code:

- (id)initWithFrame:(CGRect)aFrame
{

    self = [super initWithFrame:aFrame];
    if (self != nil)
    {
        var DOMScriptElement = document.createElement("script");

        DOMScriptElement.src = "http://www.google.com/recaptcha/api/js/recaptcha_ajax.js";
        DOMScriptElement.type = "text/javascript";

        document.getElementsByTagName("head")[0].appendChild(DOMScriptElement);

        needsInitialization = YES;
        console.log(self);
    }
    return self;

}

And my initialization code:

- (id)initializeRecaptcha
{
    if (needsInitialization)
    {
        DOMRecaptchaElement = document.createElement("div");
        DOMRecaptchaElement.id = "recaptcha_div_id";


        var style = DOMRecaptchaElement.style,
            bounds = [self bounds],
            width = CGRectGetWidth(bounds),
            height = CGRectGetHeight(bounds);

        style.overflow = "hidden";
        style.position = "absolute";
        style.visibility = "visible";
        style.zIndex = 0;
        style.left = "0px";
        style.top = "0px";
        style.width = width + "px";
        style.height = height + "px";

        _DOMElement.appendChild(DOMRecaptchaElement);

        window.Recaptcha.create("my-recaptcha-key",
            "recaptcha_div_id",
            {
                theme: "clean",
                callback: window.Recaptcha.focus_response_field
            }
        );

        needsInitialization = NO;
    }
    else
    {
        window.Recaptcha.reload();
    }
}

I figure it has something to do with the way Cappuccino propagated events, but for the life of me I can't figure out a way to get this input to work.


Solution

  • I found a fix. I copied code from the keyDown method in CPTextField that propagates the events to the browser window to the keyDown method in my custom view that holds the recaptcha:

    - (void)keyDown:(CPEvent)anEvent
    {
        [[[self window] platformWindow] _propagateCurrentDOMEvent:YES];
        [self interpretKeyEvents:[anEvent]];
        [[CPRunLoop currentRunLoop] limitDateForMode:CPDefaultRunLoopMode];
    }