2014-09-10 11 views
6

Ich habe einen contentEditable basierten Editor innerhalb einer WebView in meiner Windows Store App. Bestimmte Tastenkombinationen und Tasten können dazu führen, dass sich MessageDialog öffnet. Wenn dieser Dialog geschlossen wird, hat der Editor keinen Fokus mehr. Ich habe versucht, den Fokus auf jede mir bekannte Weise zu setzen, und es wird nicht funktionieren. Hier ist eine Beispiel-App.Fokussieren eines WebView nach einem MessageDialog ist geschlossen

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); 
     } 
    } 
} 

Es scheint mir, dass die WebView fokussiert wird, aber nicht der HTML-Inhalt innerhalb

Aktualisierung:

Mein Beispiel wurde aktualisiert, um den Code von Bryan aus der Antwort unten hinzuzufügen, aber es funktioniert immer noch nicht.

Hinweis Nachdem der MessageDialog beendet ist, wenn ich Tab zweimal drücke, wird der Editor wieder aktiv.

Update 2:

Bryans Antwort unten tut Arbeit, wenn über den Touchscreen zu navigieren. Wenn Sie jedoch Maus und Tastatur verwenden, wird das Element contentEditable nicht fokussiert. Ich habe ein Kopfgeld auf diese Suche nach einer Lösung, die das Objekt fokussiert entweder bei Verwendung des Touchscreens oder der Maus/Tastatur Combo gesetzt

Antwort

4

Wenn Sie Fokus-Status in C# setzen, ist der richtige Parameter immer FocusState.Programmatic . Die anderen Werte dienen dem Zweck, den aktuellen Fokuswert zu lesen.

Klingt wie Sie versuchen, das Steuerelement innerhalb des Webview anstelle der tatsächlichen Webansicht zu konzentrieren. Die C#/XAML-Seite der Dinge wird nichts über den Inhalt in der Webansicht wissen. Dafür müssen Sie Javascript aufrufen, das über die Steuerelemente informiert.

Hier ist ein Link zu MSDN auf Ihrem Szenario. WebView.Focus method

Edit: Nach dem Artikel muss der WebView zuerst Fokus bekommen, dann das Javascript aufgerufen.

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); 
      }); 
     } 
    } 

Hier ist meine 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> 
+0

Ich habe versucht, den Inhalt in der Webansicht Fokussierung und die Webansicht selbst, arbeiten sie weder einzeln noch zusammen – roryok

+0

Was Javascript haben Sie versucht? –

+0

Ich habe 'document.getElementById ('editor') ausprobiert. Focus()', Ich habe jquery's '$ (" # editor "). Focus()' versucht und ich habe versucht, window.location.hash einzustellen wie du oben getan hast. (Es ist auch * eine Geschichte von zwei Städten! *) – roryok

Verwandte Themen