当 WebView 在 C++/XAML/UWP 应用程序中可见时，如何获得键盘输入？

Question

I have a game app that is rendered on a Canvas, with an interface rendered in a WebView.

All the pre-game menus happen in the WebView. When the game starts I switch the WebView to a page with a transparent background so you can see the game Canvas through it, but I can still overlay some interface elements.

This all works fine graphically, and I can see my game clearly with the WebView interface overlayed. I can communicate between the game and the interface quite happily.

The problem I have is getting the WebView to give up the keyboard, so I can use the keys to control the game.

My keyboard listener is triggered on the (theoretically) global event Window.Current.CoreWindow.KeyDown, so it should get keyboard events whatever has the focus.

• I cannot set the focus on the Canvas (and add KeyDown to the Canvas), because it doesn't have a Focus() method.
• I cannot get the WebView to relinquish the keyboard by calling Focus(unfocus). It just doesn't.
• I cannot add KeyDown and KeyUp handlers to the Webview, and pass them on to the Canvas, because WebView doesn't support those methods. (see https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/web-view )
• I cannot add KeyDown and KeyUp handlers to the common parent of the WebView and Canvas, because the WebView doesn't let the events 'bubble up'.
• I cannot call the low-level keyboard functions from the game in Windows, because the function calls never return. (See How Can I Call GetAsyncKeyState() in UWP DirectX/XAML App? )
• I cannot use the HTML functions to provide input via JS, because they're too unresponsive for the game.
• I cannot use FocusManager to cycle through the focussable objects, because it only ever chooses the WebView.
• I cannot use WebViewBrush because overlay elements need to animate.

If I hide the WebView everything works fine, the keyboard events are picked up and the game is controllable. Obviously though I can't see the overlayed elements.

Is there some way to let me receive the keyboard events when the WebView is visible?

This is a Win 10/UWP app written in XAML/C++. Target platform is Win 10 10.0.14393.0/ minimum 10.0.10586.0 Tested on Surface Book running Windows 10 v1703 15063.674

Answer 1

It is possible to release the focus from the WebView by hiding and then showing it again immediately.

webView->Visibility = Visibility::Collapsed;
webView->Visibility = Visibility::Visible;

Even if there's nowhere else for the focus to go - after this operation, FocusManager::GetFocusedElement() will return null.

The webview will remain visible, but keyboard events can now be received via Window.Current.CoreWindow.KeyDown .

Note however that any interaction with the webview (eg. touch, navigation) will cause it to regain focus and you will stop receiving keyboard events.

This isn't a very satisfactory solution, but it sort-of fulfills the requirement to see the webview but also receive keyboard events.

Answer 2

Had a similar problem but managed to fix it with this trick based on Andy's answer:

DispatcherTimer timer = new DispatcherTimer
{
    Interval = TimeSpan.FromMilliseconds(100)
};

timer.Tick += (s, e) =>
{
    if (FocusManager.GetFocusedElement() is WebView webView)
    {
        webView.Visibility = Visibility.Collapsed;
        webView.Visibility = Visibility.Visible;
    }
};

timer.Start();

Answer 3

We have a Webview that must be interactive in our game at all times. The least ugly workaround that I have found so far is injecting a global event listener into the javascript to hook keyboard input, and relaying this back to the app via notify()

function onKeyDown(ev: KeyboardEvent) {

    let wrapper = { keyDown: ev }
    window['external']['notify'](JSON.stringify(wrapper));
}

function onKeyUp(ev: KeyboardEvent) {

    let wrapper = { keyUp: ev }
    window['external']['notify'](JSON.stringify(wrapper));
}


...

        let options: AddEventListenerOptions = { capture: true, passive:true,once:false } 
        document.addEventListener("keydown", onKeyDown, options);
        document.addEventListener("keyup", onKeyUp, options);