All geek questions in one place

Focusing WebView after closing MessageDialog

I have a contentEditable based contentEditable in a WebView in my Windows Store app. Some keyboard shortcuts and buttons may cause MessageDialog to open. When this dialog is rejected, the editor no longer has focus. I tried to adjust the focus as I know, and this will not work. Here is an example application.

MainPage.xaml

  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <WebView x:Name="Editor" Margin="200"></WebView> </Grid> <Page.BottomAppBar> <CommandBar x:Name="CommandBar_Editor" Visibility="Visible"> <AppBarButton Label="Debug" Icon="Setting"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="show dialog, then focus" Click="MenuFlyoutItem_Click_1"/> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> </CommandBar> </Page.BottomAppBar> </Page>

MainPage.xaml.cs

 public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); Editor.NavigateToString("<script type='text/javascript'>function focus_please(){ document.getElementById('editor').focus(); }</script><div id='editor' contentEditable='true'>It was the best of times, it was the worst of times</div>"); } private async void MenuFlyoutItem_Click_1(object sender, RoutedEventArgs e) { MessageDialog dialog = new MessageDialog("this should set focus to editor on close", "test"); UICommand okCommand = new UICommand("OK"); dialog.Commands.Add(okCommand); IUICommand response = await dialog.ShowAsync(); if (response == okCommand) { Editor.Focus(FocusState.Programmatic); // I've also tried: // FocusState.Keyboard // FocusState.Pointer // FocusState.Unfocused // this calls JS within the HTML to focus the contentEditable div await Editor.InvokeScriptAsync("focus_please", null); } } }

It seems to me that the WebView focused, but not the HTML content inside

Update:

My example has been updated to add Brian code from the answer below, but it still doesn't work.

Note After rejecting MessageDialog, if I press Tab twice, the editor becomes active again.

Update 2:

Brian's answer below works when using the touch screen for navigation. However, when using the mouse and keyboard, the contentEditable element contentEditable not focus. I put generosity on this to find a solution that allows you to focus on the element either when using the touch screen, or in combination with a mouse / keyboard.

+6
source share
1 answer

If you set the focus state to C #, the correct parameter is always FocusState.Programmatic. Other values ​​are available for reading the current focus value.

It looks like you are trying to focus the control in a web browser, not the actual web view. The C # / XAML side will not be aware of the content in the webview. To do this, you will have to call javascript, which will know about the controls.

Here is the MSDN link on your scenerio. WebView.Focus Method

Edit: According to the article, WebView must first get focus, then javascript is called.

  protected override void OnNavigatedTo(NavigationEventArgs e) { base.OnNavigatedTo(e); string html = "<html><head><script type='text/javascript'>function focusContent()" + " {if(window.location.hash != '#TaleofTwoCities'){ window.location.hash = '#TaleofTwoCities';}};" + "</script></head><body><div id='TaleofTwoCities' contentEditable='true'>It was the best of times, it was the worst of times</div></body></html>"; Editor.NavigateToString(html); } private async void MenuFlyoutItem_Click_1(object sender, RoutedEventArgs e) { MessageDialog dialog = new MessageDialog("this should set focus to editor on close", "test"); UICommand okCommand = new UICommand("OK"); dialog.Commands.Add(okCommand); IUICommand response = await dialog.ShowAsync(); if (response == okCommand) { await Window.Current.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { Editor.Focus(FocusState.Programmatic); }); await Window.Current.CoreWindow.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => { Editor.InvokeScript("focusContent", null); }); } }

Here is my xaml

 <Page x:Class="StackOverflow.WebViewFocus" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:StackOverflow" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <StackPanel VerticalAlignment="Center"><WebView Width="300" x:Name="Editor" Height="300"></WebView> <Button Click="MenuFlyoutItem_Click_1">focus</Button> </StackPanel> </Grid> <Page.BottomAppBar> <CommandBar x:Name="CommandBar_Editor" Visibility="Visible"> <AppBarButton Label="Debug" Icon="Setting"> <AppBarButton.Flyout> <MenuFlyout> <MenuFlyoutItem Text="show dialog, then focus" Click="MenuFlyoutItem_Click_1" /> </MenuFlyout> </AppBarButton.Flyout> </AppBarButton> </CommandBar> </Page.BottomAppBar> </Page>
+4
source

Source: https://habr.com/ru/post/975062/

More articles:


All Articles