2014-09-10 5 views
6

मुझे अपने विंडोज स्टोर ऐप में WebView के भीतर contentEditable आधारित संपादक मिला है। कुछ कीबोर्ड शॉर्टकट्स और बटन खोलने के लिए MessageDialog का कारण बन सकते हैं। जब यह संवाद खारिज कर दिया जाता है, तो संपादक को अब फोकस नहीं होता है। मैंने हर तरह से ध्यान केंद्रित करने की कोशिश की है, और यह काम नहीं करेगा। यहां एक नमूना ऐप है।मैसेजडियलॉग बंद होने के बाद वेबव्यू पर फ़ोकस करना

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

मुझे ऐसा लगता है कि WebView ध्यान केंद्रित है, लेकिन

के भीतर नहीं HTML सामग्री

अद्यतन:

ब्रायन के कोड में नीचे दिए गए उत्तर से जोड़ने के लिए मेरा उदाहरण अपडेट किया गया है, लेकिन यह अभी भी काम नहीं कर रहा है।

नोट संदेशडिअलॉग को खारिज करने के बाद, यदि मैं Tab दबाता हूं तो संपादक दो बार सक्रिय हो जाता है।

अद्यतन 2:

जब नेविगेट करने के लिए टच स्क्रीन का उपयोग नीचे ब्रायन के जवाब काम करता है। हालांकि माउस और कीबोर्ड का उपयोग करते समय, contentEditable तत्व फोकस नहीं करता है। मैंने इस पर एक समाधान की तलाश की है जो टच स्क्रीन या माउस/कीबोर्ड कॉम्बो

उत्तर

4

का उपयोग करते समय आइटम को ध्यान में रखे जाने की अनुमति देता है यदि आप सी # में फोकस स्थिति सेट करते हैं तो सही पैरामीटर हमेशा फोकसस्टेट होता है। प्रोग्राममैटिक । वर्तमान मूल्य मूल्य पढ़ने के उद्देश्य के लिए अन्य मूल्य हैं।

लगता है जैसे आप वास्तविक वेबव्यू के बजाय वेबव्यू पर नियंत्रण पर ध्यान केंद्रित करने का प्रयास कर रहे हैं। चीजों का सी #/एक्सएएमएल पक्ष वेबव्यू के भीतर सामग्री के बारे में नहीं पता होगा। इसके लिए आपको जावास्क्रिप्ट का आह्वान करना होगा जो नियंत्रणों के बारे में जानेंगे।

यहां आपके scenerio पर एमएसडीएन का एक लिंक है। WebView.Focus method

संपादित करें: लेख के अनुसार, वेबव्यू को पहले ध्यान केंद्रित करना होगा, फिर जावास्क्रिप्ट को बुलाया जाना चाहिए।

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

यहाँ मेरी 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

मैं वेबव्यू में दी गई सामग्री और वेबव्यू ही ध्यान केंद्रित की कोशिश की है है, वे न तो अलग से है और न ही एक साथ – roryok

+0

क्या जावास्क्रिप्ट आप की कोशिश की है काम करते हैं? –

+0

मैंने 'document.getElementById ('editor') की कोशिश की है। फोकस() ', मैंने jquery's' $ ("# editor") की कोशिश की है। फोकस()' और मैंने window.location.hash को सेट करने का प्रयास किया है। जैसा आपने ऊपर किया था। (इसके अलावा, यह * दो शहरों का एक कहानी है! *) – roryok

संबंधित मुद्दे