locked
Handle Escape Key Down Events Inside a Flyout

    Question

  • I have an <input type="text"> element inside a WinJS.UI.Flyout. Is there any way to handle keydown events for the Escape key (i.e. event.key === "Esc") inside the input element? I haven't found one so far, since keydown events are already handled by the flyout in the capture phase, with preventDefault() and stopPropagation(). Any ideas?

    Thanks,

    Guido

    Friday, November 16, 2012 9:21 AM

Answers

  • What you can do is capture the event before the flyout handler does. What I did is handle the event at the capturing phase on the body element, check that the target is the input element you want within the flyout, handle it the stop the event propagation so the flyout handler that closes the flyout never received it.

            var inputInsideFlyout = document.querySelector("#myInputElement");
            document.querySelector("body").addEventListener("keydown", function (event) {
                if (event.keyCode === WinJS.Utilities.Key.escape && event.target === inputInsideFlyout) {
                    // handle the event
    
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    event.stopPropagation();
                }
            }, true);



    T.A., Apexa, www.apexa.co


    Sunday, November 18, 2012 10:17 AM